import { NavLink } from "react-router";
 
export function MyAppNav() {
  return (
    <nav>
      <NavLink to="/" end>
        ホーム
      </NavLink>
      <NavLink to="/trending" end>
        トレンドのコンサート
      </NavLink>
      <NavLink to="/concerts">すべてのコンサート</NavLink>
      <NavLink to="/account">アカウント</NavLink>
    </nav>
  );
}

NavLink は、CSS で簡単にスタイルを設定できるように、さまざまな状態のデフォルトのクラス名をレンダリングします。

a.active {
  color: red;
}
 
a.pending {
  animate: pulse 1s infinite;
}
 
a.transitioning {
  /* CSS トランジションが実行中 */
}

また、インラインスタイルや条件付きレンダリングのために、className、style、および children に状態を持つコールバックプロパティがあります。

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

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

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

Link

リンクにアクティブなスタイルを設定する必要がない場合は、<Link> を使用します。

import { Link } from "react-router";
 
export function LoggedOutMessage() {
  return (
    <p>
      ログアウトしました。{" "}
      <Link to="/login">再度ログイン</Link>
    </p>
  );
}

Form

フォームコンポーネントは、ユーザーが提供する URLSearchParams を使用してナビゲートするために使用できます。

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

ユーザーが入力に「journey」と入力して送信すると、次の場所に移動します。

/search?q=journey

<Form method="post" /> を使用したフォームも、action プロパティに移動しますが、データを URLSearchParams の代わりに FormData として送信します。ただし、フォームデータを POST するには useFetcher() を使用するのが一般的です。フェッチャーの使用を参照してください。

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

React Router v7 ドキュメント日本語版

ナビゲーション

NavLink

Link

Form

redirect

useNavigate