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-адресу.

Ответы

Ответ 1

Это связано с тем, что метод react-redux connect реализует shouldComponentUpdate, что приведет к рендерингу компонента не, если реквизит не изменился. И теперь это конфликтует с реакционным маршрутизатором 4.

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

Другой способ - использовать withRouter HOC или передать location prop как описанный в DOCS.

Ответ 2

Вы также можете использовать:

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

И затем по умолчанию для экспорта вы сделаете следующее:

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

Потому что, когда у вас есть экспортное соединение, вам нужно сказать, что этот компонент будет использовать маршрутизатор.