如何在 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。但是在子路由器中總是刷新。 所以在使用時傳遞一個字符串。