路由

React Router（v6+）是 React 生态中最常用的客户端路由库。见 React 基础。

基本配置（数据路由可选）

tsx

import { createBrowserRouter, RouterProvider } from "react-router-dom";
import { Root } from "./Root";
import { Home } from "./pages/Home";
import { User } from "./pages/User";

const router = createBrowserRouter([
  {
    path: "/",
    element: <Root />,
    children: [
      { index: true, element: <Home /> },
      { path: "users/:userId", element: <User /> },
    ],
  },
]);

export function App() {
  return <RouterProvider router={router} />;
}

在 Root 布局组件中使用 <Outlet /> 渲染子路由。

声明式导航

tsx

import { Link, NavLink, useNavigate, useParams } from "react-router-dom";

// 链接
<Link to="/users/1">用户</Link>

// 编程式导航
const navigate = useNavigate();
navigate("/login");

// 读取动态参数
const { userId } = useParams();

路由守卫（鉴权）

React Router 无内置全局守卫，常见做法：

在布局路由的 loader 中检查会话并重定向（数据路由 API）。
包装 <ProtectedRoute> 组件：未登录则 <Navigate to="/login" replace />。

tsx

function ProtectedRoute({ children }: { children: React.ReactNode }) {
  const isAuth = useAuth();
  if (!isAuth) return <Navigate to="/login" replace />;
  return <>{children}</>;
}

懒加载

tsx

const Dashboard = lazy(() => import("./pages/Dashboard"));

{
  path: "dashboard",
  element: (
    <Suspense fallback={<p>加载中…</p>}>
      <Dashboard />
    </Suspense>
  ),
}

详见 performance/build。

与 Vue Router 对照

	React Router 6	Vue Router 4
配置	JSX 路由对象或 `createBrowserRouter`	`routes` 数组
出口	`<Outlet />`	`<RouterView />`
导航	`useNavigate` / `<Link>`	`useRouter` / `<RouterLink>`

参考文献

以下链接在编写时均可正常访问：

资料	说明
React Router 文档	英文官方
React Router：Tutorial	入门
React：lazy	懒加载组件