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

Answer 1

您还可以使用：

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

然后在导出默认设置上，你会这样：

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

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

Answer 2

这是因为react-redux connect方法会实现shouldComponentUpdate，这会导致当props没有更改时，不组件会被渲染。现在这与react-router 4相矛盾。

为避免这种情况，您可以按react-redux troubleshooting section中的说明将{pure: false}传递给connect。

另一种方法是使用withRouter HOC或传递location道具described in DOCS。

Answer 3

我将Navlinks放在无状态组件（或哑组件）中，并使用一个容器来控制导航栏的折叠状态。

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

Answer 4

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

Answer 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> 中会将您的路径更改传播到路由器组件。刚刚自己解决了一个非常相似的问题。

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

5 个答案: