useNavigate

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

¥The useNavigate hook returns a function that lets you navigate programmatically in the browser in response to user interactions or effects.

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

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

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

¥It's often better to use redirect in actions and loaders than this hook, but it still has use cases.

参数

¥Arguments

to: string

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

¥The most basic usage takes an href string:

navigate("/some/path");

路径可以是相对路径：

¥Paths can be relative:

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

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

to: Partial<Path>

你还可以传递 Partial<Path> 值：

¥You can also pass a Partial<Path> value:

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

to: Number

传递一个数字将指示浏览器在历史记录堆栈中前进或后退：

¥Passing a number will tell the browser to go back or forward in the history stack:

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

请注意，由于浏览器的历史记录堆栈的作用域不仅限于你的应用，因此这可能会导致你退出应用。

¥Note that this may send you out of your application since the history stack of the browser isn't scoped to just your application.

options

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

¥The second argument is an options object:

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

• 替换：boolean — 替换历史堆栈中的当前条目，而不是推送新的条目

  ¥replace: boolean — replace the current entry in the history stack instead of pushing a new one

• 相对："route" | "path" — 定义链接的相对路径行为

  ¥relative: "route" | "path" — defines the relative path behavior for the link

  • "route" 将使用路由层次结构，因此 ".." 会删除当前路由模式的所有 URL 段，而 "path" 将使用 URL 路径，因此 ".." 会删除一个 URL 段。

    ¥"route" will use the route hierarchy so ".." will remove all URL segments of the current route pattern while "path" will use the URL path so ".." will remove one URL segment

• 状态：any — 将持久客户端路由状态添加到下一个位置。

  ¥state: any — adds persistent client side routing state to the next location

• preventScrollReset:boolean - 如果你正在使用 <ScrollRestoration>，请防止导航时滚动位置重置到窗口顶部。

  ¥preventScrollReset: boolean - if you are using <ScrollRestoration>, prevent the scroll position from being reset to the top of the window when navigating

• flushSync：boolean — 将此导航的初始状态更新封装在 ReactDOM.flushSync 调用中，而不是默认的 React.startTransition

  ¥flushSync: boolean — wraps the initial state update for this navigation in a ReactDOM.flushSync call instead of the default React.startTransition

• viewTransition：boolean — 通过将最终状态更新封装在 document.startViewTransition() 中来为此导航启用 查看 Transition

  ¥viewTransition: boolean — enables a View Transition for this navigation by wrapping the final state update in document.startViewTransition()

  • 如果你需要为此视图转换应用特定样式，你还需要利用 useViewTransitionState()。

    ¥If you need to apply specific styles for this view transition, you will also need to leverage the useViewTransitionState()