導覽

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

NavLink

此元件適用於需要呈現活動狀態的導覽連結。

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 處於活動狀態時，它會自動擁有 .active 類別名稱，以便使用 CSS 輕鬆設定樣式

a.active {
  color: red;
}

它在 className、style 和 children 上也有回呼 props，並具有活動狀態，可用於內嵌樣式或條件式渲染

// 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

此 Hook 允許程式設計師在使用者不互動的情況下，將使用者導覽到新頁面。

對於一般導覽，最好使用 Link 或 NavLink。它們提供更好的預設使用者體驗，例如鍵盤事件、協助工具標籤、「在新視窗中開啟」、按一下滑鼠右鍵內容選單等。

保留 useNavigate 的使用，用於使用者沒有互動但您需要導覽的情況，例如

表單提交完成後
在不活動後將他們登出
定時 UI，例如測驗等。

import { useNavigate } from "react-router";

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

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