异常教程
react router dom（一文讲透）
💡一则或许对你有用的小广告
欢迎加入小哈的星球 ，你将获得：专属的项目实战 / 1v1 提问 / Java 学习路线 / 学习打卡 / 每月赠书 / 社群讨论
- 新项目:《从零手撸：仿小红书（微服务架构）》 正在持续爆肝中，基于
Spring Cloud Alibaba + Spring Boot 3.x + JDK 17...，点击查看项目介绍 ;- 《从零手撸：前后端分离博客项目（全栈开发）》 2 期已完结，演示链接： http://116.62.199.48/ ;
截止目前， 星球 内专栏累计输出 82w+ 字，讲解图 3441+ 张，还在持续爆肝中.. 后续还会上新更多项目，目标是将 Java 领域典型的项目都整一波，如秒杀系统, 在线商城, IM 即时通讯，权限管理，Spring Cloud Alibaba 微服务等等，已有 2900+ 小伙伴加入学习 ，欢迎点击围观
在现代 Web 开发中，单页应用（SPA）因其流畅的用户体验和高效性，逐渐成为主流。然而，构建 SPA 时，如何管理页面间的跳转和数据传递，是开发者必须解决的核心问题。react router dom 正是为了解决这一问题而诞生的库，它为 React 应用提供了声明式、组件化的路由解决方案。无论是搭建简单的导航栏，还是实现复杂的动态页面结构，react router dom 都能以优雅的方式帮助开发者完成需求。
本文将从零开始讲解 react router dom 的核心概念、配置方法和高级特性，并通过实际案例和代码示例，帮助读者理解如何将其应用到项目中。即使你是编程初学者，也能通过本文掌握路由的基础知识，为构建复杂的 React 应用打下坚实基础。
一、什么是 React Router DOM？
React Router DOM 是 React 生态中用于实现路由功能的官方库。它允许开发者通过 URL 的变化来控制页面内容的渲染，而无需刷新整个页面。
1.1 路由的核心概念
- 路径（Path）：URL 的一部分，用于标识不同的页面或功能模块。例如，
/about表示“关于”页面。 - 路由匹配（Route Matching）：根据当前 URL 的路径，决定渲染哪个组件。
- 导航（Navigation）：用户通过点击链接、按钮或编程方式触发页面跳转。
1.2 为什么选择 React Router DOM？
- 声明式 API：通过组件和 props 的组合，直观地定义路由规则。
- 组件化设计：路由逻辑与 UI 组件紧密结合，符合 React 的开发范式。
- 强大的生态支持：提供懒加载、路由守卫、动态路由等高级功能。
二、快速入门：基础配置
2.1 安装与初始化
首先，通过 npm 或 yarn 安装 react router dom：
npm install react-router-dom
在项目入口文件（如 index.js 或 App.js）中，使用 <BrowserRouter> 包裹整个应用：
import { BrowserRouter } from "react-router-dom";
function App() {
return (
<BrowserRouter>
{/* 应用内容 */}
</BrowserRouter>
);
}
2.2 定义基础路由
使用 <Routes> 和 <Route> 组件声明路由规则：
import { Routes, Route } from "react-router-dom";
function App() {
return (
<BrowserRouter>
<Routes>
<Route path="/" element={<Home />} />
<Route path="/about" element={<About />} />
<Route path="/contact" element={<Contact />} />
</Routes>
</BrowserRouter>
);
}
比喻：
将 react router dom 想象为一座城市的交通系统。<BrowserRouter>是城市的总调度中心，<Routes>是主要干道，而每个<Route>则是通往不同目的地的分支街道。当用户输入 URL 时，系统会根据路径自动“导航”到对应的组件。
三、动态路由与参数传递
3.1 动态路径参数
通过在路径中使用冒号（:），可以定义动态参数。例如，显示用户详情页面：
<Route path="/user/:id" element={<UserProfile />} />
在组件内部，可以通过 useParams 钩子获取参数值：
import { useParams } from "react-router-dom";
function UserProfile() {
const { id } = useParams();
return <div>用户 ID：{id}</div>;
}
比喻：
动态参数就像快递地址中的“收件人姓名”字段。无论用户输入的是/user/123还是/user/abc，系统都能识别并提取关键信息。
3.2 查询参数与搜索参数
若需传递非路径参数（如搜索关键词或分页信息），可以使用查询字符串（?key=value）。例如：
<Link to="/search?query=react">搜索 React</Link>
在组件中，通过 useLocation 获取查询参数：
import { useLocation } from "react-router-dom";
function SearchPage() {
const location = useLocation();
const query = new URLSearchParams(location.search).get("query");
return <div>搜索关键词：{query}</div>;
}
四、导航与 UI 集成
4.1 编程式导航
除了通过 <Link> 组件实现跳转外，还可以使用 useNavigate 钩子进行编程式导航：
import { useNavigate } from "react-router-dom";
function HomePage() {
const navigate = useNavigate();
return (
<button onClick={() => navigate("/about")}>
跳转到“关于”页面
</button>
);
}
4.2 自定义导航组件
可以封装一个导航栏组件，集中管理所有路由链接：
import { Link } from "react-router-dom";
function NavBar() {
return (
<nav>
<Link to="/">首页</Link>
<Link to="/about">关于我们</Link>
<Link to="/contact">联系我们</Link>
</nav>
);
}
五、嵌套路由与布局设计
5.1 嵌套结构示例
通过嵌套路由实现主从页面结构。例如，用户页面下包含“资料”和“订单”子页面：
<Route path="/user" element={<UserLayout />}>
<Route index element={<UserProfile />} /> {/* 默认路径 */}
<Route path="orders" element={<UserOrders />} />
</Route>
在父组件 <UserLayout> 中，使用 <Outlet> 渲染子路由内容：
function UserLayout() {
return (
<div>
<h1>用户中心</h1>
<Outlet /> {/* 子路由的渲染出口 */}
</div>
);
}
比喻：
嵌套路由如同图书馆的分类系统。主类别（如“用户中心”）下包含子分类（如“资料”和“订单”），通过层级结构组织内容，提升导航逻辑的清晰度。
六、高级特性与最佳实践
6.1 懒加载（Lazy Loading）
通过 lazy 和 Suspense 实现组件按需加载，减少初始加载时间：
import { lazy, Suspense } from "react";
import { Route, Routes } from "react-router-dom";
const About = lazy(() => import("./About"));
function App() {
return (
<Routes>
<Route
path="/about"
element={
<Suspense fallback={<div>加载中...</div>}>
<About />
</Suspense>
}
/>
</Routes>
);
}
6.2 路由守卫（Route Guards）
通过 useEffect 或自定义钩子实现路由权限控制：
import { useEffect } from "react";
import { useLocation, Navigate } from "react-router-dom";
function ProtectedRoute({ children }) {
const location = useLocation();
const isAuthenticated = checkAuth(); // 自定义认证逻辑
if (!isAuthenticated) {
return <Navigate to="/login" state={{ from: location }} />;
}
return children;
}
6.3 错误边界（Error Boundaries）
捕获路由渲染时的异常：
import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
function App() {
return (
<Router>
<Routes>
<Route path="/" element={<HomePage />} />
<Route path="*" element={<NotFound />} />
</Routes>
</Router>
);
}
七、常见问题与解决方案
7.1 路由路径不匹配
检查路径是否以斜杠（/）开头，并确认拼写是否正确。例如，<Route path="about" 应改为 <Route path="/about"。
7.2 组件未渲染
确保 <BrowserRouter> 包裹了所有路由相关的代码，并且 <Routes> 内部的 <Route> 组件路径与访问的 URL 匹配。
7.3 动态参数未更新
在函数组件中使用 useParams 时，确保参数名与路径定义一致。例如，路径为 /user/:id，则 useParams().id 才能获取到值。
八、结论
react router dom 是构建现代 React 应用不可或缺的工具。从基础的路由配置到高级的动态参数和懒加载，它提供了灵活且强大的功能，帮助开发者高效地管理页面跳转与数据流。通过本文的案例和代码示例，读者可以逐步掌握路由的核心概念，并将其应用到实际项目中。
掌握路由后，下一步可以尝试结合状态管理（如 Redux）或 API 调用，构建更复杂的交互逻辑。记住，实践是学习的最佳途径——动手编写代码，逐步优化路由配置，你将快速成长为一名熟练的 React 开发者！
提示：如果遇到问题，可以参考官方文档或社区资源，例如 React Router 官网 。