useNavigate

useNavigate 钩子返回一个函数，允许您在浏览器中以编程方式响应用户交互或效果进行导航。

import { useNavigate } from "@remix-run/react";

function SomeComponent() {
  const navigate = useNavigate();
  return (
    <button
      onClick={() => {
        navigate(-1);
      }}
    />
  );
}

通常在 action 和 loader 中使用 redirect 比使用这个钩子更好，但它仍然有其用例。

参数

to: string

最基本用法是使用 href 字符串

navigate("/some/path");

路径可以是相对的

navigate("..");
navigate("../other/path");

请参阅 useResolvedPath 文档中有关 Splat Paths 部分，了解 future.v3_relativeSplatPath 未来标志对于 splat 路由中相对 useNavigate() 行为的说明

to: Partial<Path>

您还可以传递 Partial<Path> 值

navigate({
  pathname: "/some/path",
  search: "?query=string",
  hash: "#hash",
});

to: Number

传递一个数字将告诉浏览器在历史堆栈中向前或向后移动

navigate(-1); // go back
navigate(1); // go forward
navigate(-2); // go back two

请注意，这可能会将您带出您的应用程序，因为浏览器的历史堆栈不仅限于您的应用程序。

options

第二个参数是一个选项对象

navigate(".", {
  replace: true,
  relative: "path",
  state: { some: "state" },
});

• replace: boolean - 替换历史堆栈中的当前条目，而不是推送新条目
• relative: "route" | "path" - 定义链接的相对路径行为
  • "route" 将使用路由层次结构，因此 ".." 将删除当前路由模式的所有 URL 段，而 "path" 将使用 URL 路径，因此 ".." 将删除一个 URL 段
• state: any - 将持久的客户端路由状态添加到下一个位置
• preventScrollReset: boolean - 如果您正在使用 <ScrollRestoration>，则在导航时防止滚动位置重置到窗口顶部
• flushSync: boolean - 将此导航的初始状态更新包装在 ReactDOM.flushSync 调用中，而不是默认的 React.startTransition
• viewTransition: boolean - 通过将最终状态更新包装在 document.startViewTransition() 中，为此导航启用 View Transition（视图过渡）
  • 如果需要为此视图过渡应用特定样式，您还需要利用 useViewTransitionState()