React router 4不会更新链接上的视图,但会在刷新时更新

Question

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

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

Answer 1

你也可以使用:

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

然后在导出默认值上,你会这样:

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

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

Answer 2

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

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

另一种方法是使用withRouterHOC或传递location道具,如DOCS中所述.

Answer 3

我将Navlinks置于无状态组件(或哑组件)和容器中以控制导航栏的崩溃状态.

将导航栏容器切换PureComponent到Component它后解决了我的问题.