React Router v4のパスが一致しない問題

Question

URLに入力するパスが存在しない場合、404ページをレンダリングしようとしています。すべてのコンポーネントの一番下に

const NotFoundLayout =() => (
    <div><h1>Not Found</h1></div> 
); 

const DefaultLayout = ({ component: Component, ...rest }) => (
    <Route 
    {...rest} render={matchProps => (
     <div> 
     <NavigationBar /> 
     <div className="mainContent"> 
      <Component {...matchProps} /> 
     </div> 
     <Footer /> 
     </div> 
    )} 
    /> 
); 

DefaultLayout.propTypes = ({ 
    component: PropTypes.func.isRequired, 
}); 

const BlogLayout = ({ component: Component, ...rest }) => (
    <Route 
    {...rest} render={matchProps => (
     <div> 
     <NavigationBar path="blog" /> 
     <div className="mainContent"> 
      <Component {...matchProps} /> 
     </div> 
     <Footer /> 
     </div> 
    )} 
    /> 
); 

BlogLayout.propTypes = ({ 
    component: PropTypes.func.isRequired, 
}); 

const HomePath =() => (
    <Switch> 
    <Route exact path="/" component={Home} /> 
    </Switch> 
); 

const NotFoundPath =() => (
    <Switch> 
    <Route component={NotFoundLayout} /> 
    </Switch> 
); 

const Work =() => (
    <Switch> 
    <Route exact path="/my-work" component={MyWork} /> 
    <Route path="/my-work/:workName" component={WorkShow} /> 
    </Switch> 
); 

const Blog =() => (
    <Switch> 
    <Route exact path="/blog" component={PostIndex} /> 
    <Route path="/blog/search" component={PostSearch} /> 
    <Route exact path="/blog/:postName" component={PostShow} /> 
    <Route path="/blog/category/:categoryName" component={CategoryShow} /> 
    <Route path="/blog/tag/:tagName" component={TagShow} /> 
    </Switch> 
); 

const routes = (
    <div> 
    <DefaultLayout exact path="/" component={HomePath} /> 
    <DefaultLayout path="/my-work" component={Work} /> 
    <BlogLayout path="/blog" component={Blog} /> 
    <DefaultLayout component={NotFoundPath} /> 
    </div> 
); 

export default routes; 

NotFoundLayoutショー：

は、ここに私のrouter.jsxです。このファイルを変更すると、パスが一致しない場合にのみ表示されます。

Answer 1

あなたはBlogで行ったようにあなたは、routesで<Switch>コンポーネントを使用する必要があり、Workなど