javascript - 如何在使用 react 路由器 v6 时使用历史实例？

Question

我正在使用 react-router v6，我必须使用历史实例。
我已经安装了它

yarn add history react-router-dom@next

我想它必须使用 v5 的一种使用历史实例的方法是使用从 react-router-dom 导入的 useHistory 钩子(Hook)
此代码在 v5 上运行良好，但在 v6 上无法正常工作

import { useHistory } from "react-router-dom";

const history = useHistory();

const onRedirectCallback = (appState) => {
        history.push(appState?.returnTo || window.location.pathname);
};

使用 v6 版本，我遇到了这个错误
尝试导入错误:“useHistory”未从“react-router-dom”导出。

Answer 1

您需要使用 useNavigate钩和新 navigate API .

import { useNavigate } from "react-router-dom";

const navigate = useNavigate();

const onRedirectCallback = (appState) => {
        navigate(appState?.returnTo || window.location.pathname);
};