useNavigate

useNavigate

useNavigate 钩子返回一个函数，让你可以根据用户交互或效果在浏览器中以编程方式导航。

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

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

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

Arguments

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