如何使用 React Router 6 在 React 组件之外导航

Question

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

import { createBrowserHistory } from 'history';

export default createBrowserHistory();

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

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

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

这如何在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;
};

然后，在定义默认路由器时，我将设置器作为子项放置：

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

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

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

Answer 2

受到 @bukso 的启发，我最终在TypeScript中得到了以下解决方案。

全球历史.tsx

import { useNavigate, NavigateFunction } from "react-router-dom";

export let globalNavigate: NavigateFunction;

export const GlobalHistory = () => {
  globalNavigate = useNavigate();

  return null;
};

索引.tsx

<React.StrictMode>
  <BrowserRouter>
    <GlobalHistory />
    {/* ... */}
  </BrowserRouter>
</React.StrictMode>

现在，您可以在 React 组件之外使用它了。globalNavigate("profile")