React Router - 基于最后一页的useNavigation

Question

我正在尝试在 React 应用程序中做一些非常简单的事情。我想要一个“后退”按钮将用户带到上一页，除非用户是从特定页面到达的，在这种情况下，“后退”会将他们路由到不同的页面 - 例如：

  const navigate = useNavigate();

    if (lastPage === XYZ) {
        navigate('/home');
    } else {
        navigate(-1);
    }

我的问题是我不知道如何获取 react-router-dom v6 中的 lastPage（其中 useHistory 已被删除）。谢谢！

Answer 1

从“特定”页面，您应该发送一些“状态”以指示它是从哪里导航的。

示例：

使用Link组件

<Link to="/newPage" state={{ fromSpecificPage: true }} />

使用 Navigate 组件

<Navigate to="/newPage" state={{ fromSpecificPage: true }} />

使用navigate函数

const navigate = useNavigate();
navigate("/newPage", { state: { fromSpecificPage: true } });

然后在您要有条件地处理后退导航的页面上检查可能已通过的特定路由状态。

import { useLocation, useNavigate } from 'react-router-dom';

...

const { state } = useLocation();
const navigate = useNavigate();

...
const { fromSpecificPage } = state || {};
if (fromSpecificPage) {
  navigate('/home', { replace: true });
} else {
  navigate(-1);
}

React Router - 基于最后一页的useNavigation

React Router - useNavigation based upon last Page

reactjs

react-router-dom