Link

类型声明

declare function Link(props: LinkProps): React.ReactElement;

interface LinkProps
  extends Omit<
    React.AnchorHTMLAttributes<HTMLAnchorElement>,
    "href"
  > {
  replace?: boolean;
  state?: any;
  to: To;
  reloadDocument?: boolean;
  preventScrollReset?: boolean;
  relative?: "route" | "path";
}

type To = string | Partial<Path>;

在react-router-dom中，<Link>被渲染为一个可访问的<a>元素，具有指向其链接资源的实际href。你可以使用<Lik reloadDocument>跳过客户端路由，让浏览器正常处理过渡。

import React from "react";
import { Link } from "react-router-dom";

function UsersIndexPage({ users }) {
  return (
    <div>
      <h1>Users</h1>
      <ul>
        {users.map((user) => (
          <li key={user.id}>
            <Link to={user.id}>{user.name}</Link>
          </li>
        ))}
      </ul>
    </div>
  );
}

relative

默认情况下，链接相对于路由层次结构，因此..将上升一层路由。但是在有些情况下，你发现匹配的URL模式没有嵌套的意义，并且你更愿意使用相对路径。

// Contact and EditContact do not share additional UI layout
<Route path="/" element={<Layout />}>
  <Route path="contacts/:id" element={<Contact />} />
  <Route
    path="contacts/:id/edit"
    element={<EditContact />}
  />
</Route>;

function EditContact() {
  // 由于Contact不是EditContact的父级，
  // 我们需要在路径中向上移动一层，
  // 而不是在Route层次结构中向上移动一层
  return (
    <Link to=".." relative="path">
      Cancel
    </Link>
  );
}

preventScrooReset

如果你正在使用<ScrollRestoration>，这将使你在连接被点击时防止滚动位置被重置到窗口顶部。

<Link to="?tab-one" preventScrollReset={true} />

这并不会阻止用户使用浏览器的“后退/前进”按钮返回到该位置时恢复滚动位置，它只是防止用户点击链接时候重置滚动位置。

replace

如果你想通过history.replaceState替换历史堆栈中的当前条目，而不是默认使用history.pushState，则可以使用replace属性。

state

state属性可以用于设置一个有状态值，该值存储在history state中，用于新位置，随后，可以通过useLocatio()访问此值。

<Link to="new-path" state={{ some: "value"}}>

你可以在即将跳转到的路由上访问此状态。

lte { state } = useLocation()