導覽

使用者可以使用 <Link>、<NavLink>、<Form>、redirect 和 useNavigate 在您的應用程式中導覽。

NavLink

此元件適用於需要渲染 active 和 pending 狀態的導覽連結。

import { NavLink } from "react-router";

export function MyAppNav() {
  return (
    <nav>
      <NavLink to="/" end>
        Home
      </NavLink>
      <NavLink to="/trending" end>
        Trending Concerts
      </NavLink>
      <NavLink to="/concerts">All Concerts</NavLink>
      <NavLink to="/account">Account</NavLink>
    </nav>
  );
}

NavLink 渲染不同狀態的預設類別名稱，以便於使用 CSS 進行樣式設定

a.active {
  color: red;
}

a.pending {
  animate: pulse 1s infinite;
}

a.transitioning {
  /* css transition is running */
}

它還在 className、style 和 children 上具有回呼屬性，並帶有狀態，用於內聯樣式設定或條件渲染

// className
<NavLink
  to="/messages"
  className={({ isActive, isPending, isTransitioning }) =>
    [
      isPending ? "pending" : "",
      isActive ? "active" : "",
      isTransitioning ? "transitioning" : "",
    ].join(" ")
  }
>
  Messages
</NavLink>

// style
<NavLink
  to="/messages"
  style={({ isActive, isPending, isTransitioning }) => {
    return {
      fontWeight: isActive ? "bold" : "",
      color: isPending ? "red" : "black",
      viewTransitionName: isTransitioning ? "slide" : "",
    };
  }}
>
  Messages
</NavLink>

// children
<NavLink to="/tasks">
  {({ isActive, isPending, isTransitioning }) => (
    <span className={isActive ? "active" : ""}>Tasks</span>
  )}
</NavLink>

Link

當連結不需要 active 樣式時，請使用 <Link>

import { Link } from "react-router";

export function LoggedOutMessage() {
  return (
    <p>
      You've been logged out.{" "}
      <Link to="/login">Login again</Link>
    </p>
  );
}

Form

表單元件可用於使用使用者提供的 URLSearchParams 進行導覽。

<Form action="/search">
  <input type="text" name="q" />
</Form>

如果使用者在輸入欄位中輸入 "journey" 並提交，他們將導覽至

/search?q=journey

使用 <Form method="post" /> 的表單也會導覽至 action prop，但會將資料作為 FormData 而不是 URLSearchParams 提交。然而，更常見的做法是使用 useFetcher() 來 POST 表單資料。請參閱使用 Fetcher。

redirect

在路由載入器和動作中，您可以傳回 redirect 到另一個 URL。

import { redirect } from "react-router";

export async function loader({ request }) {
  let user = await getUser(request);
  if (!user) {
    return redirect("/login");
  }
  return { userName: user.name };
}

通常在建立新紀錄後會重新導向到該紀錄

import { redirect } from "react-router";

export async function action({ request }) {
  let formData = await request.formData();
  let project = await createProject(formData);
  return redirect(`/projects/${project.id}`);
}

useNavigate

這個 Hook 允許程式設計師在使用者不互動的情況下將使用者導覽到新頁面。這個 Hook 的使用應該不常見。建議在可能的情況下使用本指南中的其他 API。

保留 useNavigate 的使用場景，用於使用者 *不* 互動但您需要導覽的情況，例如

在不活動後登出他們
定時 UI，例如測驗等

import { useNavigate } from "react-router";

export function useLogoutAfterInactivity() {
  let navigate = useNavigate();

  useFakeInactivityHook(() => {
    navigate("/logout");
  });
}

下一步：待定 UI