Redux使用react路由器Redux连接“阻止”导航

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

如果您更改路线。jsx导出到:

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

它会起作用的。

这是因为默认情况下connect()实现shouldComponentUpdate, 假设您的组件将产生相同的结果 相同的道具和状态。

路线更改,但道具不会更改,因此视图不会更新。

您可以通过 withRouter 即席会议。

不打算重复。

我用 withRouter 像这样

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

和

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

参见Redux,路由器集成文档 here

您是否遇到过警告消息:

Warning: You cannot change <Router history>

良好使用 withRouter 从…起 react-router-dom

我已经搜索了这么长时间,因为Redux正在重新创建我的应用程序。jsx组件具有 <Route> </Route> 作为家长,此警告只是冻结了我应用程序中的路由。我希望有React/Redux组件,因为我需要通过 authenticated 道具到路由组件,并基于它重定向,很简单。

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

并围绕连接到redux的组件:

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

更多信息: 大多数情况下,如果您想与路由器通信,需要一些道具,将其他东西传递给路由器,获取历史记录、位置信息,并且您正在应用程序中使用Redux,请使用 带路由器 您可以作为道具访问这些属性。