react-router не перерисовывает компоненты redux connect() при изменении маршрута

Я использую react-router-redux для навигации и имею вложенные компоненты connect()ed. Кажется, это работает нормально, за исключением того, что мои вложенные компоненты не перерисовываются при изменении маршрута реактивного маршрутизатора.

В частности, в приведенной ниже структуре App и Sidebar являются компонентами connect()ed, и им обоим требуется информация от state. Когда я нажимаю Link в Sidebar:

  • действие @@router/LOCATION_CHANGE срабатывает,
  • У меня есть routerReducer реакции-маршрутизатора-редукса, объединенного с моим состоянием, поэтому состояние обновляется,
  • Приложение перерисовывается, и отображается новый маршрут,
  • но боковая панель не перерисовывается, поэтому «активный» Link не обновляется, а activeClass никогда не изменяется.

Что здесь может быть не так?

Маршрутизатор

<Router component={App}>
   <Route path="foo" component={Foo}/>
   <Route path="bar" component={Bar}/>
   <Route path="baz" component={Baz}/>
</Router>

Приложение

<div> 
  <Sidebar/>
  <div>
    {children}
  </div>
</div>

Боковая панель

<nav>
   <Link to="/foo" activeClass="active">Foo</Link>
   <Link to="/bar" activeClass="active">Bar</Link>
   <Link to="/baz" activeClass="active">Baz</Link>
</nav>

react-redux react-router-redux
person nicholas    schedule 08.12.2016    source источник
comment
Я обхожу эту проблему, произвольно передавая текущее время на боковую панель (<Sidebar time={Date.now()}/>). Тот факт, что он каждый раз разный, кажется, вызывает повторный рендеринг, но на самом деле это не исправляет.   -  person nicholas    schedule 09.12.2016

Ответы (2)


arrow_upward
1
arrow_downward

У меня была такая же проблема (без использования Redux), и, похоже, React решил больше не вызывать рендеринг для вашей боковой панели, даже если приложение повторно рендерится. Я исправил это, завернув боковую панель в withRouter, что приведет к повторному рендерингу боковой панели при изменении маршрута.

Что-то вроде этого:

import {withRouter} from 'react-router'
// or 'react-router-dom' on v4.x
class Sidebar extends Component {...}
export default withRouter(Sidebar)
person Bob    schedule 21.03.2017

arrow_upward
-1
arrow_downward

эта проблема хорошо задокументирована на странице руководств по реактивному маршрутизатору https://github.com/ReactTraining/react-router/blob/master/packages/react-router/docs/guides/blocked-updates.md#работасблокировкойобновлений

TL;DR убедитесь, что ваши компоненты учитывают местоположение. либо с помощью sCU, либо HoC

person Rei Dien    schedule 21.03.2017
comment
Добро пожаловать в Stack Overflow! Ссылка на решение приветствуется, но убедитесь, что ваш ответ полезен и без нее: добавьте контекст вокруг ссылки, чтобы другие пользователи иметь некоторое представление о том, что это такое и почему оно там, а затем процитировать наиболее релевантную часть страницы, на которую вы ссылаетесь, в случае, если целевая страница недоступна. Ответы, которые представляют собой не более чем ссылку, могут быть удалены. - person FelixSFD; 21.03.2017