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 上具有回调 props，其中包含用于内联样式或条件渲染的状态

// 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>
  );
}

表单

表单组件可用于使用用户提供的URLSearchParams 进行导航。

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

如果用户在输入框中输入“journey”并提交，则他们将导航到

/search?q=journey

带有<Form method="post" /> 的表单也将导航到 action 属性，但会将数据作为FormData 而不是URLSearchParams 提交。但是，更常见的是使用useFetcher() 来 POST 表单数据。请参阅使用 Fetcher。

重定向

在路由加载程序和操作中，您可以将redirect 到另一个 URL。

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