代码之家 › 专栏 › 技术社区 › r4id4

路由推送时反应路由器更新子组件

react-router-v4 react-router reactjs javascript

r4id4 · 技术社区 · 7 年前

我有一个这样的组件

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

这可能吗?
我该怎么做?

1 回复 | 直到 7 年前

Shubham Khatri 7 年前

是的,这是可能的,您需要定义嵌套管线,如

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>

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

推荐文章

Evanss · 使用React Router 4对组件内的url更改作出反应?

6 年前

Aman_Kawatra · 渲染同一组件,并在特定管线更改上更改某些状态属性

6 年前

James · 受保护的路由反应路由器4不使用存储在Redux中的身份验证状态

7 年前

Max Wolfen · 为什么在新的react路由器dom<Redirect/>中没有在setTimout内触发?

7 年前

Nicolas Albarracin · Web包和React浏览器路由器

7 年前

Prasaad Patil · 如何显示传递给组件的参数,以及如何在reactjs中为组件提供可选参数?

7 年前

RomaValcer · 隐式传递路由器历史记录

7 年前

forJ · 如何使用react路由器4配置专用路由

7 年前

Mesmerize86 · 嵌套React路由器v4

7 年前

Velidan · React Router v4-使用更改的默认路由进行动态配置

7 年前