Javascript 在路由推送时响应路由器更新子组件

我有一个这样的组件

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

更新

动态内容

，而不实际转换到其他组件
在伪代码中，我想要的是

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

myApp类扩展了React.Component{ 返回( {route==='/profile'-> 路由==='/notification'->} ) 这可能吗？

---

我如何才能做到这一点？

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

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

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

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

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