javascript - 在组件外部的 react-router v5 中以编程方式访问历史记录(history.push 等)

Question

我曾经能够在 <= v4 中将历史传递到 React Router:

import { Route } from 'react-router-dom';
import { createBrowserHistory } from 'history';

const history = createBrowserHistory();

<Router history={history}>
   <App />
</Router>

编辑:糟糕，我正在使用 Router之前不是 BrowserRouter这是 SSR 所需要的。 BrowserRouter 可能从来没有给出这个选项。所以似乎唯一的解决方案是拆分入口组件并从 useHistory 获取历史记录。 hook 然后传递给 ApolloClient管他呢。

投票结束。

Answer 1

也许我的代码可以帮助你:

import { createBrowserHistory } from "history";
import qs from "qs";

const history = createBrowserHistory();

history.location = {
    ...history.location,
    query: qs.parse(history.location.search.substr(1)),
    state: {},
};
history.listen(() => {
    history.location = {
        ...history.location,
        query: qs.parse(history.location.search.substr(1)),
        state: history.location.state || {},
    };
});

const { go, goBack, push, replace } = history;

export { go, goBack, push, replace, getRedirectPath };
export default history;

然后在 react-router history 属性中使用此文件中公开的历史记录。现在，您可以在组件外部或内部使用公开的 go 或 push 函数。