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による簡単なスタイリングのために、自動的に.activeクラス名が追加されます。

a.active {
  color: red;
}

また、アクティブ状態をインラインスタイリングや条件付きレンダリングのために、className、style、およびchildrenのプロップにコールバックも備えています。

// className
<NavLink
  to="/messages"
  className={({ isActive }) =>
    isActive ? "text-red-500" : "text-black"
  }
>
  Messages
</NavLink>

// style
<NavLink
  to="/messages"
  style={({ isActive }) => ({
    color: isActive ? "red" : "black",
  })}
>
  Messages
</NavLink>

// children
<NavLink to="/message">
  {({ isActive }) => (
    <span className={isActive ? "active" : ""}>
      {isActive ? "👉" : ""} 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>
  );
}

useNavigate

このフックを使用すると、プログラマはユーザーの操作なしにユーザーを新しいページに移動できます。

通常のナビゲーションには、LinkまたはNavLinkを使用することをお勧めします。これらは、キーボードイベント、アクセシビリティのラベル付け、「新しいウィンドウで開く」、右クリックコンテキストメニューなど、より優れたデフォルトのユーザーエクスペリエンスを提供します。

useNavigateの使用は、ユーザーが操作していないがナビゲーションが必要な状況に限定してください。たとえば、

フォーム送信完了後
非アクティブ後のログアウト
クイズなどのタイムドUI

import { useNavigate } from "react-router";

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

  return (
    <>
      <MyHeader />
      <MyLoginForm
        onSuccess={() => {
          navigate("/dashboard");
        }}
      />
      <MyFooter />
    </>
  );
}