如何在 React Router v5 中推送到历史记录？

Posted 2023-02-22

【中文标题】如何在 React Router v5 中推送到历史记录？

【英文标题】：How to push to History in React Router v5?

【发布时间】：2020-10-16 20:31:38

【问题描述】：

是否可以创建一个全局历史文件来管理 react-router-dom v5 上的 createBrowserHistory()？ 我知道 V5 使用 useHistory() 作为获取历史记录的一种方式。但是是否可以从任何地方检索历史记录，例如我不使用函数组件的情况？

在 V4 上，我可以创建一个文件 history.js：

import  createBrowserHistory  from 'history';
export default createBrowserHistory();

它适用于 V4 https://codesandbox.io/s/react-router-v4-nfwr0

它在 V5 上不起作用 - 它会更新 URL，但会重定向到未找到 https://codesandbox.io/s/react-router-v5-not-working-jlrep

【参考方案1】：

正如文档所说，您应该使用历史的 v4 来处理 react-router v5。

https://github.com/ReactTraining/history

版本 4 的文档可以在 v4 分支上找到。版本 4 用于 React Router 版本 4 和 5。

【讨论】：

哦！这适用于历史/位置，太糟糕了，没有关于如何让 React Router 真正注意到变化的内容。 :-(

【参考方案2】：

我通过这样做解决了这个问题。看看我做了什么

像以前一样创建文件

这是代码

import createBrowserHistory  from 'history';
import store from 'store';
export default createBrowserHistory(
    basename:  store ? store.getState().productionBaseUrl : ''
);

我导入 Redux 的原因是项目没有放在 nginx 根文件夹上。所以我应该添加一个基本名称。如果你不需要它，你可以删除它。

然后你可以在你自己的 coponnet 中使用它。如何使用？让我给你看一下代码。

// if my history in src/router/
import history from 'router/history';

history.push(`$your router address`)

注意

history 的 push 方法可以传递一个像 origin props 这样的对象。但是在子路由器中总是会刷新。所以在使用的时候传递一个字符串。