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

此钩子允许程序员在没有用户交互的情况下将用户导航到新页面。

对于正常的导航，最好使用 Link 或 NavLink。它们提供了更好的默认用户体验，如键盘事件、可访问性标签、“在新窗口中打开”、右键上下文菜单等。

将 useNavigate 的使用保留在用户没有交互但您需要导航的情况下，例如：

表单提交完成后
在用户不活动后将其登出
定时的用户界面，如测验等。

import { useNavigate } from "react-router";

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

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

下一步：URL 值

导航

简介

NavLink

Link

useNavigate