React 路由器 4 不会更新链接上的视图，但会更新

Posted 2023-02-21

【中文标题】React 路由器 4 不会更新链接上的视图，但会更新

【英文标题】：React router 4 does not update view on link, but does on refresh

【发布时间】：2017-10-09 07:10:13

【问题描述】：

我正在使用以下简单的导航代码

<Router>
  <Switch>
    <Route exact path='/dashboard' component=Dashboard />
    <Route path='/dashboard/accounts' component=AccountPage />
  </Switch>
</Router>

<NavLink exact to='/dashboard'
         disabled=this.props.item.disabled
         activeClassName='active'>

<NavLink exact to='/dashboard/accounts'
         disabled=this.props.item.disabled
         activeClassName='active'>

URL 改变，但视图没有改变。但是，当我刷新页面或手动转到该 URL 时，它确实会发生变化。

【问题讨论】：

你的组件是 react-redux 连接的组件吗？

是的......

那我想你可能遇到了我在这个答案***.com/questions/43892050/…

中描述的同样的问题

【参考方案1】：

这是因为 react-redux connect 方法实现了 shouldComponentUpdate ，这将导致组件 not 在 props 未更改时渲染。现在这与 react-router 4 冲突。

为避免这种情况，您可以将pure: false 传递给connect，如react-redux troubleshooting section 中所述。

另一种方法是使用withRouter HOC 或传递location 属性，如described in DOCS。

【参考方案2】：

你也可以使用：

import  withRouter  from 'react-router-dom';

然后在您的导出默认值上，您可以这样做：

export default withRouter(connect(mapStateToProps, )(Layout));

因为当你有一个导出连接时，你需要告诉那个组件将使用路由器。

【讨论】：

我们可以使用redux，那么我们如何应用这个方法呢？

我有同样的问题，不是 udpate，但我们没有使用 redux，那么问题是什么，或者我们如何在我们的代码中应用您的解决方案？

【参考方案3】：

我遇到过这个问题。我通过向组件 Switch 添加属性键来解决它，其值为位置路径名和位置搜索。

【讨论】：

这对我有用！现在，当我手动更改网址时它可以工作。示例：<Switch key=loc.pathname + "@" + loc.hash + "@" + loc.search.toString()> loc 来自 useLocation()。记得在Router的子组件中调用它

【参考方案4】：

我的导航链接位于无状态组件（或哑组件）和一个容器中，用于控制导航栏的折叠状态。

在将导航栏容器从PureComponent 切换到Component后，它为我解决了这个问题。

【参考方案5】：

您是否尝试过确保您的路由器标签包含整个代码块？

<Router>
  <Switch>
    <Route exact path='/dashboard' component=Dashboard />
    <Route path='/dashboard/accounts' component=AccountPage />
  </Switch>

  <NavLink exact to='/dashboard'
         disabled=this.props.item.disabled
         activeClassName='active'>

  <NavLink exact to='/dashboard/accounts'
         disabled=this.props.item.disabled
         activeClassName='active'>
</Router>

它看起来很奇怪，但是当您单击链接并实际呈现您正在路由到的组件时，包含到 <Router> 的链接会将您的路径更改传播到路由器组件。我自己刚刚解决了一个非常相似的问题。