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

Question

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

在 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

Answer 1

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

https://github.com/ReactTraining/history

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

Answer 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 一样传递一个 object。但是在子路由器中总是刷新。 所以在使用时传递一个字符串。