reactjs-React Router 4不会更新链接上的视图,但是会刷新

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

<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时,它确实会更改。

ilyo asked 2020-08-08T14:14:49Z
4个解决方案
49 votes

您还可以使用:

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

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

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

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

daminufe answered 2020-08-08T14:15:03Z
29 votes

这是因为withRouter location方法实现了shouldComponentUpdate,当道具未更改时,这将导致组件无法渲染。 现在,这与react-router 4发生冲突。

为了避免这种情况,您可以按照react-redux疑难解答部分中的说明将withRouter传递给location

另一种方法是使用withRouter HOC或传递location属性,如DOCS中所述。

Tomasz Mularczyk answered 2020-08-08T14:15:32Z
5 votes

我将导航链接放在无状态组件(或哑组件)中,并使用一个容器来控制导航栏的折叠状态。

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

Tom Schinelli answered 2020-08-08T14:15:58Z
0 votes

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

TDQ answered 2020-08-08T14:16:19Z
translate from https://stackoverflow.com:/questions/43895805/react-router-4-does-not-update-view-on-link-but-does-on-refresh