Redux 使用 react-router-redux 连接 "blocks" 导航

Question

在使用 react、redux 和 react-router 的应用程序中，我使用 react-router-redux 发出导航操作。我发现用 connect 在组件中包装路由会阻止导航。

我用 CodeSandbox 做了一个示例来说明这个问题：sample.

照原样，导航不起作用。但是，如果在 ./components/Routes.jsx 中，这一行：

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

被替换为：

export default Routes;

有效。

知道如何在不中断导航的情况下在包装路由的组件中使用 connect 吗？

Answer 1

请参阅 react-redux 文档中的 troubleshooting 部分。

如果您将 Routes.jsx 导出更改为：

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

它会起作用。

This is because connect() implements shouldComponentUpdate by default, assuming that your component will produce the same results given the same props and state.

路线改变，但道具没有改变，所以视图不会更新。

您可以使用 withRouter hoc.

实现相同的效果

Answer 2

不能重复。

我用 withRouter 修复了它

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

和

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

查看 Redux、路由器集成文档 here

Answer 3

您是否遇到过警告信息：

Warning: You cannot change <Router history>

使用 withRouter 从 react-router-dom

我已经搜索了很长时间，因为 Redux 正在重新创建我的 App.jsx 组件，该组件以 <Route> </Route> 作为父组件，并且此警告只是冻结了我应用程序中的路由。我想要 React/Redux 组件，因为我需要将 authenticated 道具传递给 Route 组件，并基于它进行重定向，很简单。

所以import { withRouter } from 'react-router-dom'

并在连接到 redux 的组件周围加上：

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

更多：大多数时候，如果你想与路由器通信，获取一些道具，将其他东西传递给它，获取历史记录，位置形成它并且你在你的应用程序中使用 Redux，用 withRouter 包围这个组件你会可以访问这些属性作为道具。

Redux 使用 react-router-redux 连接 "blocks" 导航

Redux connect "blocks" navigation with react-router-redux

reactjs

react-router

redux

react-redux

react-router-redux