javascript - 在 redux 中使用 React Router

Question

如果我们想在 redux 中以编程方式更改路由，我们曾经使用 react-router-redux npm 包。但它已被作者存档。现在推荐的解决方案是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-dom 的 Link 出现问题。 Link 必须放置在 BrowserRouter 内，但我无法使用它，因为没有 BrowserRouter 因为正如文档所说 - “记住删除对 BrowserRouter 或 NativeRouter 的任何使用，因为保留这些会导致状态同步问题。”

问题是 ConnectedRouter 是 react-router 的连接版本，而不是 react-router-dom，所以没有什么像 >Link 或 NavLink 在其中。

一定有办法，否则我相信这个包在 github 上不会有 3k star...

问题:如何在ConnectedRouter中使用Link？谢谢!

Answer 1

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

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

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