如何使用反应路由器 6 在反应组件之外导航

Question

现在我有一个 History 模块，它让我甚至可以在 react 组件之外使用历史记录：

import { createBrowserHistory } from 'history';

export default createBrowserHistory();

那我直接在 App.jsx 中使用这个历史记录

import { Router } from 'react-router-dom';
...
<Router history={history}>...</Router>

我可以在任何地方导入和使用相同的历史对象。即使在任何 React 组件之外的自定义助手中也是如此。

这如何在 react router 6 中工作？

由于历史被导航取代，我在网上还没有看到任何解决方案。

我知道它仍处于测试阶段，但我想提前检查一下。

感谢您的任何想法！

Answer 1

我最终得到了以下解决方案：

起初，react-router-dom 6 有导航而不是历史。最好使用导航来导航路线：

我创建并修复了我的 History 对象，以便它可以继续使用“push”工作，并且我不需要大量返工：

const History = {
  navigate: null,
  push: (page, ...rest) => History.navigate(page, ...rest),
};

export default History;

然后我制作了自己的组件来设置导航：

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

const NavigateSetter = () => {
  History.navigate = useNavigate();

  return null;
};

然后在定义默认路由器时，我将 setter 作为子级：

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

<BrowserRouter>
    <NavigateSetter />
    <App />
</BrowserRouter>

之后，您可以在任何地方使用 History.push 或 History.navigate 以及默认的 react-router-dom 导航 API。

Answer 2

在我的例子中，我需要在第一次渲染之前访问历史对象，所以我最终基于BrowserRouter 实现围绕Router 编写了自定义组件，这将允许我通过道具传递历史。

代码见https://github.com/remix-run/react-router/discussions/8241#discussioncomment-1677474。

编辑： 从 react-router-dom v6.1.0 开始，HistoryRouter 是其实现的一部分，因此您可以直接执行以下操作：

import {HistoryRouter} from 'react-router-dom'
import {createBrowserHistory} from 'history'

const history = createBrowserHistory()

<HistoryRouter history={history} />