React Router 中的导航功能存在问题 - 一个可以工作，另一个不能，无法检索状态

Question

我目前正在使用路由库，并且遇到导航功能的问题。我有两个涉及导航的箭头函数，虽然第一个函数按预期工作，但第二个函数似乎引起了问题。

() => navigate("/some-route", { state: { some: "value" } })

() => navigate(-1, { state: { from: location } })

在非工作代码中，我尝试使用 -1 作为导航参数以及其他状态信息导航回上一页。但是，我似乎无法检索目标页面上的状态。

Answer 1

使用 delta 时

navigate

的函数签名不允许传递任何选项。

declare function useNavigate(): NavigateFunction;

interface NavigateFunction {
  (to: To, options?: NavigateOptions): void;
  (delta: number): void; // <-- no options
}

interface NavigateOptions {
  replace?: boolean;
  state?: any;
  preventScrollReset?: boolean;
  relative?: RelativeRoutingType;
  unstable_flushSync?: boolean;
  unstable_viewTransition?: boolean;
}

type RelativeRoutingType = "route" | "path";

如果您需要实现导航操作以导航返回到特定页面并传递一些数据，则需要使用非增量函数签名。

建议示例：

从页面 A，PUSH/REPLACE 到路径 B，并将当前位置与其他状态一起传递。

const location = useLocation();

...

() => navigate(
  "/some-route",
  {
    state: {
      some: "value",
      from: location,
    }
  }
);

在 B 页上，替换为通过的

state.from

引荐来源网址位置，或一些安全的后备路线，例如

"/"

。

const location = useLocation();

...

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