Question

我有这样的组件

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

使用此路线

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

它加载得很好。
我想要实现的是当网址发生变化时，例如

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

此外，您必须使用UpperCase字符作为第一个字母

来定义组件

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

1 个答案: