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-reduxconnect метод реализует shouldComponentUpdate что приведет к тому, что компонент не будет отображаться, когда реквизиты не изменятся. И это противоречит сейчас с реакции-маршрутизатором 4.

Чтобы избежать этого, вы можете пройти {pure: false} в connect как описано в разделе "Устранение неполадок реагирующего редуктора"

Другой способ заключается в использовании withRouter HOC или пройти location опора, как описано в DOCS.

Answer 3

У меня были свои Navlinks в компоненте без состояния (или немом компоненте) и контейнере, чтобы управлять состоянием коллапса моей панели навигации.

после переключения navbar-контейнера из PureComponent в Componentэто решило проблему для меня.

Answer 4

Вы пытались убедиться, что теги вашего маршрутизатора охватывают весь фрагмент кода?

      <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>распространяет изменение вашего пути на компоненты маршрутизатора, когда вы щелкаете ссылку, и фактически отображает компонент, к которому вы направляетесь. Я только что исправил очень похожую проблему.

Answer 5

Я столкнулся с этой проблемой. Я разрешаю это путем добавления атрибута ключа к компоненту. Переключатель со значением - это имя пути и местоположение.