路由方案对比

React 自己没有路由

React 是 view 库，路由是社区方案。常见 4 个：

React Router（SPA 模式最常见）

import { BrowserRouter, Routes, Route } from 'react-router-dom';

<BrowserRouter>
  <Routes>
    <Route path="/" element={<Home />} />
    <Route path="/users/:id" element={<UserPage />} />
    <Route path="*" element={<NotFound />} />
  </Routes>
</BrowserRouter>

注意：v7 起 React Router 也支持 SSR（前身是 Remix）。如果新项目还想用 React Router，看 v7 framework mode。

数据加载（loader）

v6.4+ 的 loader：

const router = createBrowserRouter([
  {
    path: '/users/:id',
    loader: async ({ params }) => fetch(`/api/user/${params.id}`),
    element: <UserPage />,
  },
]);

页面进来前自动拉数据，避免 "loading flash"。

Next.js App Router（推荐新项目）

app/
├── page.tsx              → /
├── about/page.tsx        → /about
└── users/[id]/page.tsx   → /users/:id

文件即路由，无需注册。详见 react-quick 09。

嵌套布局

app/
├── layout.tsx            → 根布局
└── dashboard/
    ├── layout.tsx        → /dashboard/* 共享
    ├── page.tsx
    └── settings/page.tsx

布局不重渲染——切换 settings 和 page 时 dashboard layout 保持。

客户端导航

import Link from 'next/link';
import { useRouter } from 'next/navigation';

<Link href="/about">关于</Link>

const router = useRouter();
router.push('/users/1');

TanStack Router

import { createRouter, createRoute, createRootRoute } from '@tanstack/react-router';

const rootRoute = createRootRoute();
const userRoute = createRoute({
  getParentRoute: () => rootRoute,
  path: '/users/$id',
  component: UserPage,
});

优势：TypeScript 类型推断到达路径参数、search params 都强类型——React Router / Next.js 在这方面较弱。

劣势：生态小、学习曲线陡、文档不如另外两个友好。

Remix（独立产品 → 被 React Router v7 吸收）

Remix 强调"Web 基本面"——HTML 表单、HTTP 缓存、nested routes。从 React Router v7 开始，Remix 团队把它合入 React Router framework mode。

新项目要 SSR 路由：React Router v7 framework mode 或 Next.js，二选一。

SPA vs SSR 路由的根本区别

如果SEO 不重要（内部工具、登录后 dashboard），SPA + React Router 完全够用，部署简单（CDN 一扔）。

如果SEO 重要（marketing 站、博客、电商），用 SSR 框架。

实战选型

• 新项目 + 要 SEO + 想要全套（路由 + SSR + 服务端逻辑）→ Next.js
• 新项目 + 内部工具 / dashboard → React Router v6 (SPA) 或 Vite + 任意路由
• 已有 React Router 项目要升级到 SSR → React Router v7 framework mode
• TypeScript 强迫症 → TanStack Router
• 全栈类型安全 + 不想要框架感太重 → tRPC + React Router

通用模式

无论用哪个，几个能力是路由方案必须的：

• 嵌套路由（nested routes）
• 路径参数（/users/:id）
• search params（?q=foo）
• 路由守卫 / 重定向
• 加载中状态（Suspense / loading.tsx）
• 错误边界（error.tsx）
• 代码分割（按路由拆 bundle）

选型时拿这些去验证。

→ 下一篇 表单实战