在 redux 中使用反应路由器

Question

如果我们想在 redux 中以编程方式更改路由，我们曾经使用react-router-reduxnpm 包。但是，它是由其作者存档的。现在推荐的解决方案是connected-react-router：

https://www.npmjs.com/package/connected-react-router

但正如本包中的文档所说，应该使用它而不是react-router来使其工作。

通常我使用react-router-dom：

import { BrowserRouter } from 'react-router-dom';
<BrowserRouter>
<Route path='/' />
<Route path='/hey' />
</BrowserRouter>

但正如文档所说，我必须用包中的ConnectedRouter替换react-router v4/v5：

import { ConnectedRouter } from 'connected-react-router';
<ConnectedRouter history={history}>
<Route path={'/'} />
<Route path={'/foo'} />
</ConnectedRouter>

但是这种情况会导致react-router-domLink出现问题。Link必须放在BrowserRouter中，但我不能使用它，因为没有BrowserRouter因为正如文档所说 -"请记住删除 BrowserRouter 或 NativeRouter 的任何用法，因为将其保留会导致同步状态时出现问题。

问题是ConnectedRouter是react-router的连接版本，而不是react-router-dom，所以里面没有Link或NavLink。

一定有办法，如果没有，我相信这个包在 github 上不会有 3k 星......

问：如何在ConnectedRouter内使用Link？谢谢！

Answer 1

我建议你只使用react-router-dom。

不再需要将其连接到 redux。在过去，这可能是有原因的，因为很难读取当前的路径名或搜索参数，因为只有主页组件接收这些作为位置。但是现在，借助withRouter，您可以从任何地方阅读。

您还可以使用历史记录来推送路由。这在过去也是一个令人头疼的问题。