React 路由

博客的多页面、后台的菜单跳转，在 React 里都靠「路由」完成：URL 变了，页面内容跟着换，但浏览器不刷新页面。react-router-dom 是 React 生态的事实标准路由库。本节以 v6 版本讲清最常用的四招：声明、跳转、取参、兜底。

安装与最小示例

先在项目里安装依赖：

npm install react-router-dom

路由由三件套组成：BrowserRouter 包住整个应用，Routes 声明路由表，Link 负责页面跳转。

import { BrowserRouter, Routes, Route, Link } from 'react-router-dom';
import Home from './pages/Home';
import About from './pages/About';

export default function App() {
  return (
    <BrowserRouter>
      <nav>
        <Link to="/">首页</Link> | <Link to="/about">关于</Link>
      </nav>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
      </Routes>
    </BrowserRouter>
  );
}
// 点击链接只换 URL 与下方内容，整个过程不刷新页面

动态参数 useParams

地址里会变化的部分用 :xxx 占位，组件内部用 useParams 读取。

import { useParams } from 'react-router-dom';

export default function Article() {
  const { id } = useParams(); // 从 URL 取出参数
  return <h1>正在查看文章：{id}</h1>;
}
// 访问 /article/12 时页面显示：正在查看文章：12

路由表中这样声明带参数的路径：

<Route path="/article/:id" element={<Article />} />

编程式跳转 useNavigate

按钮点击、登录成功这类「不是链接」的跳转，不能靠 Link，要用 useNavigate 手动触发。

import { useNavigate } from 'react-router-dom';

export default function Login() {
  const navigate = useNavigate();

  function handleLogin() {
    // 模拟登录成功，跳回首页
    navigate('/');
    // navigate('/home', { replace: true }) 可替换历史记录
  }

  return <button onClick={handleLogin}>登录并跳转</button>;
}

嵌套路由与 404 兜底

Route 可以嵌套：父路由渲染公共布局，子路由渲染内容区；path="*" 会在任何地址都匹配不上时显示 404 页面。

<Routes>
  <Route path="/" element={<Layout />}>
    <Route index element={<Home />} />        {/* 默认子路由 */}
    <Route path="about" element={<About />} />
  </Route>
  <Route path="*" element={<h1>404 页面不存在</h1>} />
</Routes>

小结

路由本质上是一张「URL 到组件」的映射表：Routes/Route 负责声明，Link 与 useNavigate 负责跳转，useParams 读取动态参数，* 做 404 兜底。记住这四招，任何后台系统的页面框架都能搭出来。