React Router 在路由推送时更新子组件

Question

我有这样的组件

class myApp extends React.Component {
  return (
   <div>
     <NavigationBar />
     {/* dynamic_content */}
   </div> )
}

这条路线

<Router>
  <Route exact path="/" component={myApp}/>
</Router>

加载正常。
我想要实现的是当 url 发生变化时，例如

/profile
/notifications

dynamic_content 已更新，但实际上并未转换到另一个组件。
在伪代码中，我想要的是

class myApp extends React.Component {
  return (
   <div>
     <NavigationBar />
     {route === '/profile' -> <Profile/>
      route === '/notification' -> <Notification/>}
   </div> )

这可能吗？
我该怎么做？

Answer 1

是的，这是可能的，你需要的是像这样定义嵌套的路由

class MyApp extends React.Component {
  return (
   <div>
     <NavigationBar />
     {/* dynamic_content */}
     <Route path='/profile' component={Profile}/>
     <Route path="/notification" component={Notification}/>
   </div> )
}

并在没有 exact 道具的情况下配置您的父路由

<Router>
  <Route path="/" component={MyApp}/>
</Router>

此外，您必须以大写字符作为第一个字母来定义您的组件

React Router 在路由推送时更新子组件

React Router update subcomponent upon route push

javascript

reactjs

react-router

react-router-v4