跳到主要内容

导航与链接

  • 链接语义: Link 提供真实 href 与客户端导航，保留键盘、复制链接和新标签打开等浏览器习惯;
  • 目标表达: to 可包含路径、查询和 hash，相对路由解析与相对路径解析要按意图选择;
import { Link } from "react-router";

const link = <Link to="/users">用户列表</Link>;

如何给当前导航项显示激活样式？​

  • NavLink: 在 Link 基础上提供激活状态，可通过 className 或 children 回调调整展示;
  • 模式限制: pending、视图过渡等状态依赖所用路由模式与功能，不是任意 BrowserRouter 环境都具有完整数据导航状态;
import { NavLink } from "react-router";

const item = (
  <NavLink to="/messages" className={({ isActive }) => (isActive ? "active" : "")}>
    消息
  </NavLink>
);

如何在业务操作之后执行导航？​

  • useNavigate: 在登录成功、流程完成等事件中进行编程式导航，通常不替代页面上本来就应是链接的元素;
  • 替换历史: replace 适合不希望后退回到中间页的场景，普通导航则新增历史记录;
function LoginButton({ login }) {
  const navigate = useNavigate();
  return (
    <button
      onClick={async () => {
        await login();
        navigate("/account", { replace: true });
      }}
    >
      登录
    </button>
  );
}

导航附加状态与 URL 参数怎样选择？​

  • URL 数据: 需要分享、书签或刷新后明确恢复的筛选信息放进路径或查询参数;
  • Location state: 临时导航上下文可通过 state 传递并用 useLocation 读取，不把它当作服务端可见的授权信息;
  • 滚动控制: preventScrollReset 需要相应滚动恢复集成支持，不能假定它单独管理所有滚动位置;