React 路由器 4 不会更新链接视图,但会在刷新时更新

IT技术 reactjs url react-router react-router-v4
2021-03-28 07:03:36

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

<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 时,它会发生变化。

5个回答

您还可以使用:

import { withRouter } from 'react-router-dom';

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

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

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

我们可以使用 redux 那么我们如何应用这个方法呢?
2021-05-28 07:03:36
我有同样的观点而不是 udpate 但我们没有使用过 redux 那么问题是什么或者我们如何在我们的代码中应用您的解决方案?
2021-06-09 07:03:36

这是因为react-redux connect方法实现了shouldComponentUpdate当 props 没有改变时,它会导致组件渲染。现在这与 react-router 4 相冲突。

为了避免它,你可以传递{pure: false}connect中所述react,终极版的故障排除部分

另一种方法是使用withRouterHOC 或 pass locationprop,如DOCS 中所述

我在一个无状态组件(或哑组件)和一个容器中使用了我的 Navlinks 来控制我的导航栏的折叠状态。

将导航栏容器从切换PureComponentComponent它为我解决了问题。

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

那对我有用!现在当我手动更改 url 时它可以工作。示例: <Switch key={loc.pathname + "@" + loc.hash + "@" + loc.search.toString()}> loc 来自 useLocation()。记得在Router的子组件中调用
2021-06-15 07:03:36

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

<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>当您单击链接并实际呈现您要路由到的组件时,将链接包含到路由器组件中会将您的路径更改传播到路由器组件。刚刚自己解决了一个非常相似的问题。