在使用React Router V6时如何使用历史实例？

Question

我正在使用react-router v6，我必须使用历史记录实例。

我已经使用

安装了它

yarn add history react-router-dom@next

使用历史实例的一种方法，我猜它必须与v5一起使用是使用从react-router-dom导入的useHistory钩子

此代码在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);
};