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);

它会起作用。

这是因为connect（）默认实现了shouldComponentUpdate，假设您的组件将产生相同的结果相同的道具和国家。

路线更改，但道具没有，因此视图无法更新。

您可以使用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 connect＆＃34; blocks＆＃34;使用react-router-redux进行导航

3 个答案: