`useNavigate`

類型宣告

declare function useNavigate(): NavigateFunction;

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

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

type RelativeRoutingType = "route" | "path";

通常建議在 redirect 中而非此 Hook 使用 loaders 及 actions

useNavigate Hook 回傳一個函式，允許你在程式中導航，例如在副作用中

import { useNavigate } from "react-router-dom";

function useLogoutTimer() {
  const userIsInactive = useFakeInactiveUser();
  const navigate = useNavigate();

  useEffect(() => {
    if (userIsInactive) {
      fake.logout();
      navigate("/session-timed-out");
    }
  }, [userIsInactive]);
}

navigate 函式有兩個簽章

傳遞一個 To 值 (與 <Link to> 相同的類型) 佐以一個選配的第二個 options 參數 (類似你可以傳遞給 <Link> 的 prop)
或傳遞你想在歷史堆疊中移動的相對位置。例如，navigate(-1) 等同於按下返回按鈕

請參閱 useResolvedPath 文件中的不規則路徑章節，以了解 future.v7_relativeSplatPath 未來旗標對於在不規則路由中 useNavigate() 的相對行為

`options.replace`

指定 replace: true 會使導航取代歷史堆疊中的當前項目，而非新增一個項目

`options.state`

您可納入一個選用的 state 值，以儲存在歷史記錄狀態中，爾後您可透過 useLocation 存取目的地的路線。

navigate("/new-route", { state: { key: "value" } });

`options.preventScrollReset`

當您使用 <ScrollRestoration> 組件時，您可以透過 options.preventScrollReset 停用重置卷軸到頁面頂端。

`options.relative`

預設上，導航功能相對於路線層級（relative: "route"），所以 .. 會向上前往一個 Route 層級。偶爾，您會發現某些相符的 URL 模式並不適合做巢狀，而且您偏好使用相對*路徑*的導航功能。您可以透過 relative: "path" 選擇這類的行為模式。

// Contact and EditContact do not share additional UI layout
<Route path="/" element={<Layout />}>
  <Route path="contacts/:id" element={<Contact />} />
  <Route
    path="contacts/:id/edit"
    element={<EditContact />}
  />
</Route>;

function EditContact() {
  // Since Contact is not a parent of EditContact we need to go up one level
  // in the path, instead of one level in the Route hierarchy
  navigate("..", { relative: "path" });
}

請注意 relative: "path" 僅會影響相對路徑的解析。它並未改變相對路徑解析的「起始」位置。這種解析永遠相對於路線層級中的當前位置（亦即呼叫 useNavigate 的路線）。

如果您希望使用針對當前 URL（而非路線層級）的與路徑相關的導航功能，您可以透過目前的 location 與 URL 建構子來達成此目的（請注意斜線後的行為模式）。

// Assume the current URL is https://remix.dev.org.tw/docs/en/main/start/quickstart
let location = useLocation();

// Without trailing slashes
new URL(".", window.origin + location.pathname);
// 'https://remix.dev.org.tw/docs/en/main/start/'
new URL("..", window.origin + location.pathname);
// 'https://remix.dev.org.tw/docs/en/main/'

// With trailing slashes:
new URL(".", window.origin + location.pathname + "/");
// 'https://remix.dev.org.tw/docs/en/main/start/quickstart/'
new URL("..", window.origin + location.pathname + "/");
// 'https://remix.dev.org.tw/docs/en/main/start/'

`options.unstable_flushSync`

unstable_flushSync 選項會指示 React Router DOM 以 ReactDOM.flushSync 呼叫來封裝這個導航功能的初始狀態更新，而非預設的 React.startTransition。這允許您在更新功能傳送到 DOM 之後立即執行同步的 DOM 動作。

unstable_flushSync 僅適用於使用資料路由器的情況，請參閱挑選路由器

請注意此 API 被標記為不穩定，可能會在沒有重大版本發佈的情況下，成為重大變更的對象。

`options.unstable_viewTransition`

unstable_viewTransition 選項會啟用檢視轉場效果來進行此項導航功能，方法是將最終狀態更新封裝在 document.startViewTransition() 裡面。如果您需要套用特定的樣式來進行此項檢視轉場，您也必須利用 unstable_useViewTransitionState()。

unstable_viewTransition 僅適用於使用資料路由器的情況，請參閱挑選路由器

請注意此 API 被標記為不穩定，可能會在沒有重大版本發佈的情況下，成為重大變更的對象。