react router v6 useNavigate vs Navigate location 实现

Question

据我了解，随着 react router v6 中历史记录的替换，useNavigate() 和 Navigate 的实现应该实现类似的行为。 我怎样才能在 function 中实现以下类似的实现登录前返回上一页：

使用导航（ https://reactrouter.com/en/v6.3.0/api#usenavigate ）：

const navigate = useNavigate();
useEffect(() => {
    return navigate(-1, { replace: true }); 
});

导航组件（ https://reactrouter.com/en/v6.3.0/api#navigate ）：

<Navigate to="/home" replace state={{ from: location }} />;

Answer 1

如果我正确理解您的问题，您是在询问如何使用navigate function 作为Navigate组件来实现相同的行为，以重定向回用户在被重定向以进行身份验证之前尝试访问的页面。

假设您已经实施了适当的路由保护，该保护获取当前正在访问的位置并使用 state 中传递的引荐来源网址重定向到登录路由：

const location = useLocation();

 ...

<Navigate to="/login" replace state={{ from: location }} />

登录组件将访问 state 并在成功的身份验证后重定向回通过的位置，或应用程序主页等后备/默认路径。

const location = useLocation();
const navigate = useNavigate();

...

const { from } = location.state || {};
navigate(from?.pathname || "/", { replace: true });