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

リンクにアクティブなスタイル設定が必要ない場合は、<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 プロパティで指定された URL に遷移しますが、データは URLSearchParams ではなく FormData として送信されます。ただし、フォームデータを POST するには useFetcher() を使用するのが一般的です。「Fetcher の使用」を参照してください。

redirect

ルートローダーとアクション内で、別の URL に redirect することができます。

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

このフックを使用すると、ユーザーの操作なしに新しいページに移動させることができます。このフックの使用は一般的ではありません。可能な限り、このガイドの他の API を使用することをお勧めします。

useNavigate の使用は、ユーザーが操作していないが、ナビゲートする必要がある状況に限定してください。例えば、

非アクティブ状態後のログアウト
クイズなどの時間制限付き UI

import { useNavigate } from "react-router";

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

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

次へ: 保留中の UI