组件不能与反应路由器v4动态呈现

Question

由于某种原因，使用react-router v4的基于react的应用程序中的嵌套路由不起作用。

Dashboard组件呈现3个子组件，即Header，Footer＆amp; Content1。默认情况下，所有这些组件都会在路由/dashboard上呈现，但我希望Content1组件根据网址进行更改，即Content2组件应在网址/dashboard/content2上呈现，以代替Content1没有发生并且点击此网址会引发404错误。任何帮助都非常感谢。以下是代码：

index.js

return (
  <Router>
    <div>
      <Route exact path="/" component={Login}/>
      <Route path="/dashboard" component={Dashboard} />
    </div>
  </Router>
);

Dashboard.js

return (
    <div>
      <Header/>
      <Footer/>
      <Switch>
        <Route path="/dashboard/content2" component={Content2} />  // Hitting this route throws a 404 error...
       <Route component={Content1} />
      </Switch>
   </div>
);