javascript - 路由推送后，React Router更新子组件

我有一个这样的组件

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> )

这有可能吗？
我怎样才能做到这一点？

最佳答案

是的，有可能，您需要的是定义嵌套路由，例如

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>

另外，您必须使用UpperCase字符作为首字母定义组件