useNavigate

useNavigate Hook 會回傳一個函式，讓您可以在瀏覽器中根據使用者互動或效果以程式化的方式導覽。

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

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

在 action 和 loader 中，使用 redirect 通常比此 Hook 更佳，但它仍然有其使用情境。

參數

to: string

最基本用法是使用 href 字串

navigate("/some/path");

路徑可以是相對的

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

請參閱 useResolvedPath 文件中的 Splat 路徑章節，以了解關於 splat 路由中相對 useNavigate() 行為的 future.v3_relativeSplatPath future 旗標的說明

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()