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

Question

是否可以创建全局历史文件来管理 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

Answer 1

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

https://github.com/ReactTraining/history

Documentation for version 4 can be found on the v4 branch. Version 4 is used in React Router versions 4 and 5.

Answer 2

我通过this.See我所做的

解决了这个问题

像以前一样创建一个文件

这是代码

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

我导入 Redux 的原因是项目没有在 nginx root 上发布 folder.So 我应该添加一个 basename.If 你不需要它，你可以删除它。

然后你就可以在你自己的网络中使用它了。如何使用？让我给你看代码。

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

history.push(`${your router address}`)

关注

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

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

How to push to History in React Router v5?

history

reactjs

react-router-dom

像以前一样创建一个文件

关注