React Router 入门教程（TypeScript + Vite）

发表于 分类于
用 Vite + React 18 + TypeScript 快速上手 React Router v6：路由配置、页面组件、Link 导航、参数路由。

前言

React Router 是 React 生态里最常用的前端路由方案之一。它让你把应用拆成多个“页面组件”，并根据浏览器地址（URL path）渲染不同内容。

本教程会在同一个最小项目里完成以下目标：

  • 用 Vite 初始化 React + TypeScript
  • 配置 React Router v6 的路由（Routes/Route）
  • 使用 Link 做页面间导航（不刷新页面）
  • 演示参数路由（例如 /users/:id），并用 useParams 读取参数

你可以用它作为 React 入门（组件 + Hooks）的延伸：路由就是把“组件显示逻辑”按 URL 组织起来。

依赖

创建项目

1
2
3
npm create vite@latest react-getting-started-router-ts -- --template react-ts
cd react-getting-started-router-ts
npm install

安装路由

1
npm i react-router-dom

实现

BrowserRouter

编辑 src/main.tsx，把 <App /> 包在 BrowserRouter 里：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
// src/main.tsx
import React from "react";
import ReactDOM from "react-dom/client";
import { BrowserRouter } from "react-router-dom";
import App from "./App";
import "./index.css";

ReactDOM.createRoot(document.getElementById("root")!).render(
  <React.StrictMode>
    <BrowserRouter>
      <App />
    </BrowserRouter>
  </React.StrictMode>
);

要点：

  • BrowserRouter 负责监听 URL 变化并把当前路径映射到对应路由
  • 放在入口处最简单：App 只负责“声明路由”

路由配置

新建/修改 src/App.tsx，使用 Routes/Route 声明路由：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
// src/App.tsx
import { Routes, Route, Navigate } from "react-router-dom";
import RootLayout from "./layouts/RootLayout";
import Home from "./pages/Home";
import About from "./pages/About";
import User from "./pages/User";

export default function App() {
  return (
    <Routes>
      <Route element={<RootLayout />}>
        <Route index element={<Home />} />
        <Route path="about" element={<About />} />
        <Route path="users/:id" element={<User />} />

        <Route path="*" element={<Navigate to="/" replace />} />
      </Route>
    </Routes>
  );
}

要点：

  • Route element={<RootLayout />} 用于做“公共布局”（导航栏、外层结构等）
  • index 表示根路径 /
  • path="*" 表示兜底（当前路径不匹配任何路由时跳回首页）
  • Navigate 用来进行重定向

布局（Outlet）

新建 src/layouts/RootLayout.tsx：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
// src/layouts/RootLayout.tsx
import { Outlet } from "react-router-dom";
import NavBar from "../components/NavBar";

export default function RootLayout() {
  return (
    <div style={{ fontFamily: "sans-serif" }}>
      <NavBar />
      <main style={{ padding: 16 }}>
        <Outlet />
      </main>
    </div>
  );
}

Outlet 的作用是：渲染当前匹配到的子路由组件。

导航（Link）

新建 src/components/NavBar.tsx：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
// src/components/NavBar.tsx
import { Link } from "react-router-dom";

export default function NavBar() {
  return (
    <header style={{ padding: 12, borderBottom: "1px solid #eee" }}>
      <Link to="/" style={{ marginRight: 12 }}>
        首页
      </Link>
      <Link to="/about" style={{ marginRight: 12 }}>
        关于
      </Link>
      <Link to="/users/123">查看用户 123</Link>
    </header>
  );
}

要点：

  • Link 用来做导航，它会修改 URL 并渲染对应路由页面
  • 与普通 <a href="..."> 相比，Link 不会触发整页刷新

页面与参数

Home

新建 src/pages/Home.tsx：

1
2
3
4
5
6
7
8
9
// src/pages/Home.tsx
export default function Home() {
  return (
    <section>
      <h2>首页</h2>
      <p>欢迎来到 React Router 入门示例。</p>
    </section>
  );
}

About

新建 src/pages/About.tsx：

1
2
3
4
5
6
7
8
9
// src/pages/About.tsx
export default function About() {
  return (
    <section>
      <h2>关于</h2>
      <p>这里演示路由切换，不需要刷新页面。</p>
    </section>
  );
}

User 参数

新建 src/pages/User.tsx：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
// src/pages/User.tsx
import { useParams } from "react-router-dom";

export default function User() {
  const params = useParams();
  const id = params.id;

  return (
    <section>
      <h2>用户详情</h2>
      <p>
        路由参数 <code>id</code> = {id}
      </p>
    </section>
  );
}

要点：

  • /users/:id 会把 :id 的值注入到 useParams() 里
  • 参数路由在真实项目中常用于详情页（例如商品详情、文章详情）

验证

启动开发服务器：

1
npm run dev

然后做以下验证：

  1. 打开浏览器访问首页 /，确认能看到“首页”内容
  2. 点击导航里的“关于”，URL 变为 /about，页面切换到 About（不刷新）
  3. 点击“查看用户 123”，URL 变为 /users/123，页面显示 id = 123
  4. 访问不存在的路径（例如 /no-such-page），应重定向回 /

如果你希望更直观看到路由匹配过程，可以在 User 或各页面里临时加 console.log，观察浏览器控制台输出。

扩展

你可以在入门基础上继续扩展：

  • 为 404 单独写一个页面组件（不要重定向回首页）
  • 加上 useSearchParams（查询参数）示例
  • 实现路由懒加载：React.lazy + 动态导入页面组件
  • 根据业务加上“权限/登录守卫”（例如在进入某些路由前检查状态）

总结

完成这篇后，你已经掌握了 React Router 入门的核心知识：

  • BrowserRouter：路由上下文入口
  • Routes/Route：路由表声明
  • RootLayout + Outlet：公共布局与子路由渲染
  • Link：无刷新导航
  • 参数路由：/users/:id + useParams

方法

  • Routes：声明路由匹配集合
  • Route：单条路由规则（path + element）
  • Navigate：重定向
  • Outlet：渲染嵌套路由子组件
  • Link：导航组件
  • useParams：读取路由参数