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

Posted

技术标签:

【中文标题】如何在 React Router v5 中推送到历史记录?【英文标题】:How to push to History in React Router v5? 【发布时间】:2021-02-05 06:20:23 【问题描述】:

是否可以创建一个全局历史文件来管理 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 这样的对象。但是在子路由器中总是会刷新。所以在使用的时候传递一个字符串。

【讨论】:

以上是关于如何在 React Router v5 中推送到历史记录?的主要内容,如果未能解决你的问题,请参考以下文章

如何在 Angular 4 中推送到数组的 Observable? RxJS

如何使用 React Router V5 默认滚动到顶部?

在使用 React Router v5 和 Redux 时,无法弄清楚如何将 props 传递给组件

如何在GCP发布/订阅中推送到多个端点?

如何从 gitlab CI 管道中推送到仓库?

如何在 React Router v5 中更新 URL 并替换历史状态而不重新渲染整个应用程序?