reactjs - 在路线改变时 react 力重新安装组件

标签 reactjs react-router

对两条路由使用相同的组件时,如何在路由更改时重新安装组件?

这是我的代码。

路由.jsx

<Router history={browserHistory}>
  <Route path="/" component={Home} />
  <Route path="/foo/:fooId" component={Home} />
</Router>

我有条件检查 Home fooId 的组件,它相应地呈现 JSX。
<Link to="/foo/1234">fooKey</Link>

目前,当点击 fooKey路由发生变化并且 Home 组件中的渲染功能被重新触发,但不会再次安装。

我浏览了其他提到 componentWillReceiveProps 的答案,但我在 constructor 中有很多配置我不想将所有这些配置移到 componentWillReceiveProps .

如果需要更多信息,请发表评论。

最佳答案

如果您需要在每次路由匹配时强制重新安装组件,您可以通过 实现它 key 除非您知道自己在做什么:

<Route
  exact
  path={'some path'}
  render={props => <RemountAlways key={Date.now()} {...props} />}
/>
key={Date.now()}这个关键属性将强制 react 每次重新安装。

注: componentWillReceiveProps 在 react 中是个坏消息。

关于reactjs - 在路线改变时 react 力重新安装组件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45332611/

相关文章:

css - react /CSS : Using CSS stylesheets in a React app?

javascript - 如何使用 React 从 JSON 对象加载图像?

reactjs - 如何在 DataGrid for Material UI 中设置可拖动框的样式?

javascript - 阻止 popstate 事件运行?

javascript - 当用户导航到 react 路由器中的特定路线时,不会呈现任何 child

excel - 用于 PDF 导出、Excel 导出和打印的 ReactJS 组件

javascript - 使用 <Link> 从 useState() Hook 传递 setState

javascript - meteor react 器相当于 react 路由器是什么?

reactjs - 使用 react 路由器在所有页面上创建公共(public)标题和侧边栏

javascript - ReactJS - 如何使用 ES5 路由 View