很多新手学完 React 基础后，都会遇到一个问题：写了多个页面组件，却不知道怎么实现页面切换。

普通网页通过 a 标签跳转页面，会触发整页刷新；而 React 主打 SPA 单页应用，核心特点就是无刷新跳转页面、流畅丝滑。想要实现这个功能，必须掌握 React 生态的核心工具：React Router。

本文基于最新的 React Router v6，全程用通俗大白话讲解，搭配完整可运行代码。

一、什么是 React 路由？核心作用

简单理解：路由就是 URL 地址和页面组件的映射关系。

当浏览器地址栏的 URL 发生变化时，React Router 会自动匹配对应的组件，渲染到页面上，全程不刷新浏览器页面，这就是单页应用的核心原理。

没有路由的 React 项目，永远只能展示一个页面；有了 React Router，才能实现多页面跳转、嵌套页面、参数传值等核心功能。

二、安装 React Router

React Router 不是 React 内置插件，需要手动安装。我们前端项目只需要用到网页端路由库 react-router-dom。

在你的 React 项目终端中执行安装命令：

npm install react-router-dom

重要说明：本文适配 React Router v6+（当前最新稳定版），v6 语法相较于旧版本 v5 有大幅改动，是目前企业开发通用标准。

三、核心概念提前吃透（新手必看）

React Router v6 最核心的 4 个 API，弄懂这几个就掌握了 80% 基础用法：

• BrowserRouter：路由根容器，必须包裹整个项目，作用是给全局组件提供路由能力，开启浏览器路由模式（地址栏美观、无 # 号）。

• Routes：路由匹配容器，替代旧版本的 Switch，内部存放所有路由规则，会精准匹配 URL 地址。

• Route：单条路由规则，核心两个属性：path（匹配的 URL 地址）、element（地址匹配成功后渲染的组件）。

• Link：路由跳转标签，替代原生 a 标签，无刷新跳转，不会发起网络请求，只更新页面组件。

四、实战入门：搭建基础路由页面

我们从零搭建一个包含「首页、关于我们、联系我们」的多页面项目，手把手实现基础路由跳转。

步骤1：创建基础页面组件

在 src 目录下新建 3 个简单页面组件：

1. Home.js 首页组件

export default function Home() {
  return <h1>🏠 首页 Home</h1>;
}

2. About.js 关于我们组件

export default function About() {
  return <h1>📖 关于我们 About</h1>;
}

3. Contact.js 联系我们组件

export default function Contact() {
  return <h1>📞 联系我们 Contact</h1>;
}

步骤2：全局配置路由规则

在根组件 App.js 中引入路由 API 和页面组件，配置导航栏和路由匹配规则：

import React from "react";
// 引入核心路由组件
import { BrowserRouter, Routes, Route, Link } from "react-router-dom";
// 引入自定义页面组件
import Home from "./Home";
import About from "./About";
import Contact from "./Contact";

function App() {
  return (
    {/* 路由根容器：包裹整个项目，全局生效 */}
    <BrowserRouter>
      <div className="App" style={{ padding: "20px" }}>
        {/* 导航跳转栏 */}
        <nav style={{ marginBottom: "30px" }}>
          <Link to="/" style={{ marginRight: "20px" }}>首页</Link>
          <Link to="/about" style={{ marginRight: "20px" }}>关于我们</Link>
          <Link to="/contact">联系我们</Link>
        </nav>

        {/* 路由规则匹配：URL 对应组件 */}
        <Routes>
          <Route path="/" element={<Home />} />
          <Route path="/about" element={<About />} />
          <Route path="/contact" element={<Contact />} />
        </Routes>
      </div>
    </BrowserRouter>
  );
}

export default App;

核心知识点解析

1. BrowserRouter 必须包裹在最外层，所有路由相关组件都要在它内部使用。

2. Link to="xxx" 对应 Route path="xxx"，地址完全匹配即可跳转渲染对应组件。

3. Routes 开启精准匹配：访问 /about 只会渲染 About 组件，不会匹配首页，避免页面重叠。

此时运行项目，点击导航文字，即可实现无刷新页面跳转，SPA 核心效果完成！

五、进阶核心：嵌套路由（子页面）

实际开发中，很多页面存在父子层级，比如：博客总页面下包含「博客列表页、博客详情页」，这就需要嵌套路由。

我们实现一个博客嵌套路由案例，同时讲解 路由参数获取。

步骤1：创建博客相关组件

1. Blog.js 博客父页面

import { Routes, Route, Link } from "react-router-dom";
import BlogList from "./BlogList";
import BlogDetail from "./BlogDetail";

export default function Blog() {
  return (
    <div>
      <h1>📝 博客中心</h1>
      {/* 子页面导航 */}
      <nav style={{ margin: "20px 0" }}>
        <Link to="" style={{ marginRight: "20px" }}>博客列表</Link>
        <Link to="1001" style={{ marginRight: "20px" }}>文章1001</Link>
        <Link to="1002">文章1002</Link>
      </nav>

      {/* 子路由规则 */}
      <Routes>
        {/* 默认展示博客列表 */}
        <Route path="" element={<BlogList />} />
        {/* 动态路由：匹配任意文章id */}
        <Route path=":id" element={<BlogDetail />} />
      </Routes>
    </div>
  );
}

2. BlogList.js 博客列表页

export default function BlogList() {
  return <p style={{ fontSize: "18px" }}>这里是全部博客文章列表，欢迎浏览！</p>;
}

3. BlogDetail.js 博客详情页（带参数获取）

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

export default function BlogDetail() {
  // useParams 获取URL中的动态参数 id
  const { id } = useParams();
  return <p style={{ fontSize: "18px" }}>当前浏览的文章 ID：{id}</p>;
}

步骤2：在根路由中注册嵌套路由

在 App.js 的 Routes 中添加一行规则：

<Route path="/blog/*" element={<Blog />} />

关键细节：父路由地址必须加 /*，代表匹配 /blog 开头的所有子路径，否则嵌套路由无法生效。

效果说明

• 访问 /blog：展示博客列表页

• 访问 /blog/1001：展示对应 ID 的文章详情页

• 通过 useParams() 可以轻松获取 URL 中的动态参数，实现详情页复用

六、程序化导航：JS 代码跳转页面

除了 Link 标签点击跳转，开发中经常需要通过代码逻辑跳转（比如登录成功后跳转、接口请求成功后跳转）。

此时需要用到 v6 核心钩子：useNavigate。

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

export default function NavButton() {
  // 初始化导航实例
  const navigate = useNavigate();

  // 点击按钮触发跳转
  const goPage = () => {
    navigate("/about"); // 跳转到关于我们页面
    // navigate(-1); // 返回上一页
    // navigate("/blog", { replace: true }); // 替换当前历史记录（无法返回）
  };

  return (
    <button onClick={goPage} style={{ padding: "6px 12px", cursor: "pointer" }}>
      点击跳转到关于页面
    </button>
  );
}

常用用法：

• navigate("路径")：前进跳转页面

• navigate(-1)：返回上一页（等价于浏览器返回按钮）

• navigate(路径, { replace: true })：替换历史记录，适合登录、重定向场景

七、配置 404 页面（兜底路由）

当用户访问不存在的 URL 地址时，需要展示 404 兜底页面，提升用户体验。

只需在 Routes最后一行 添加通配符路由：

<Route path="*" element={<h1>❌ 404 页面不存在！</h1>} />

注意事项：404 路由必须放在所有路由规则的最后，否则会优先匹配，导致所有页面失效。

八、完整项目目录结构

本次实战最终目录结构，清晰规范：

src/
├─ App.js          # 根组件、路由总配置
├─ Home.js         # 首页组件
├─ About.js        # 关于我们组件
├─ Contact.js      # 联系我们组件
├─ Blog.js         # 博客父组件（嵌套路由容器）
├─ BlogList.js     # 博客列表子组件
└─ BlogDetail.js   # 博客详情子组件

九、知识点总结（新手必背）

1. 核心作用：React Router 实现 SPA 无刷新多页面跳转，是 React 项目必备路由方案。

2. 基础四件套：BrowserRouter（根容器）、Routes（匹配容器）、Route（路由规则）、Link（标签跳转）。

3. 嵌套路由：父路由后缀加 /*，子组件内部再次使用 Routes/Route，搭配 useParams 获取动态参数。

4. 代码跳转：useNavigate 实现逻辑控制页面跳转，支持前进、后退、重定向。

5. 兜底路由：path="*" 配置 404 页面，放置在所有路由最后。

十、拓展学习方向

掌握以上基础后，你可以继续进阶学习 React Router 常用高级功能：路由守卫、路由懒加载、路由重定向、嵌套路由完整权限控制等，适配企业级项目开发。