前端Wiki/词条/React Router 路由

React Router 路由

定义React 生态最主流的客户端路由库，用 URL 驱动单页应用的页面切换与组件渲染

React Router 把 URL 与组件映射起来：访问 /about 就渲染 About 组件，整个过程不刷新页面。它基于 history API（旧版本也支持 hash 模式）监听地址变化，在路由树里匹配到对应的 Route 后渲染其 element，并用 Link 组件代替 a 标签来避免页面整刷。

实战中最常用的三板斧是 Routes/Route 声明路由表、Link/NavLink 做导航、useParams 读动态参数。进阶还有嵌套路由（Outlet 承载子路由）、路由守卫与懒加载路由。React Router v6 之后API 大改：Switch 换成 Routes、component 换成 element，写法更接近配置式，性能也更好。

v6 起 Routes 替代 Switch，element 替代 component，路由可嵌套
动态参数用 :id 声明，组件内用 useParams 读取
Link 阻止默认跳转，配合 history API 实现无刷新切换

JavaScript

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

function User() {
  const { id } = useParams();           // 读取动态参数 :id
  return <h3>用户页：{id}</h3>;
}

export default function App() {
  return (
    <BrowserRouter>
      <nav>
        <Link to="/">首页</Link>
        <Link to="/user/42">用户 42</Link>
      </nav>
      <Routes>
        <Route path="/" element={<h3>首页</h3>} />
        <Route path="/user/:id" element={<User />} />
      </Routes>
    </BrowserRouter>
  );
}

⚠ 常见误区

还按 v5 的 Switch 与 component 写法，v6 及以上版本直接报错
在路由组件里直接用 a 标签跳转，导致页面整刷丢失单页体验
忘了把 Routes 包进 BrowserRouter，地址变化但视图不更新

🔗 相关词条React Router 路由脚手架与项目结构