如何使用React路由器6在React组件之外导航 [英] How to navigate outside of react component using react router 6

问题描述

现在我有一个历史记录模块，它允许我在Reaction组件之外使用历史记录：

import { createBrowserHistory } from 'history';

export default createBrowserHistory();

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

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

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

这在Reaction路由器6中如何工作？

因为历史记录被替换为导航，所以我还没有看到任何在线解决方案。

我知道它仍然是测试版，但我想提前检查一下。

谢谢您的点子！

推荐答案

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

首先，反应路由器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>

之后，您可以使用Everywhere历史记录。推或历史记录。使用默认的REACTION-RUTER-DOM的导航API导航。

这篇关于如何使用React路由器6在React组件之外导航的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！