Redux соединяет навигацию «блоков» с реакцией

Question

В приложении, использующем реакции , redux и реагирующий маршрутизатор , я использую реагирующий маршрутизатор-редуктор для выдачи навигационные действия. Я обнаружил, что оборачивание маршрутов в компоненте с connect блокирует навигацию.

Я сделал образец с CodeSandbox , который иллюстрирует проблему: sample .

Как есть, навигация не работает. Однако, если в . / Components / Routes.jsx , эта строка:

export default connect(() => ({}), () => ({}))(Routes);

заменяется на:

export default Routes;

Работает.

Есть идеи, как можно использовать connect в компоненте, который переносит маршруты без нарушения навигации?

Answer 1

Не должно быть дубликатом.

Я исправил это с withRouter вот так

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

и

export default withRouter( connect(mapStateToProps)(App) );

См. Redux, документы по интеграции маршрутизатора здесь

Answer 2

См. Раздел поиск и устранение неисправностей в документах о реактивной редукции.

Если вы измените экспорт Routes.jsx на:

export default connect(() => ({}), () => ({}), null, { pure: false })(Routes);

это будет работать.

Это потому, что connect () по умолчанию реализует shouldComponentUpdate, при условии, что ваш компонент будет давать те же результаты, учитывая тот же реквизит и гос.

маршрут меняется, но реквизит не меняется, поэтому представление не обновляется.

Вы можете достичь того же с withRouter hoc.