企业官网建设流程全解析

网站制作百度网盘,商城网站建设计划书,摄影师网站模板,在线图片编辑器精简版React Router DOM 全面学习笔记#xff1a;从原理到实战 在 React 生态中#xff0c;react-router-dom 是实现前端路由、构建单页应用#xff08;SPA#xff09;的核心库。它解决了单页应用中页面切换、路由匹配、权限控制等关键问题#xff0c;让前端开发能够脱离后端路由…React Router DOM 全面学习笔记从原理到实战在 React 生态中react-router-dom是实现前端路由、构建单页应用SPA的核心库。它解决了单页应用中页面切换、路由匹配、权限控制等关键问题让前端开发能够脱离后端路由的强依赖实现更流畅的用户体验。本文将从路由基础、核心用法、实战案例、原理剖析等维度全面梳理 react-router-dom 的学习要点结合代码示例深入讲解助力开发者快速掌握并灵活运用。一、前端路由的核心概念1.1 路由的演变从后端到前端在前后端未分离的传统开发模式中路由的控制权完全掌握在后端。前端仅负责页面切图与静态展示当用户点击链接或输入 URL 时会向服务器发送 HTTP 请求后端根据请求路径匹配对应的资源返回完整的 HTML 页面。这种模式存在明显弊端每次页面切换都会重新加载整个页面导致页面白屏、加载速度慢用户体验较差此时的前端开发者也被戏称为“切图仔”。随着前后端分离架构的普及前端技术栈日益成熟HTML5 提供了原生的路由能力前端路由应运而生。前端路由允许在不刷新整个页面的前提下通过改变 URL 路径实现页面组件的切换与内容更新。其核心逻辑是URL 变化时前端捕获该事件通过路由规则匹配对应的组件在页面中渲染新组件从而实现“无刷新跳转”大幅提升用户体验。1.2 前端路由的两种实现形式react-router-dom 提供了两种主流的路由实现方式分别基于不同的技术原理适用于不同场景1.2.1 HashRouter基于锚点的路由HashRouter 利用 URL 中的锚点#实现路由跳转。锚点原本用于定位页面内的元素其特性是改变锚点内容不会触发浏览器的页面刷新仅会触发hashchange事件。HashRouter 正是借助这一特性将路由信息存储在锚点之后例如http://localhost:3000/#/about。特点URL 格式带有#视觉上相对“丑陋”兼容性极强支持所有主流浏览器包括低版本 IE因为锚点是早期 HTML 就支持的特性无需后端配置因为锚点部分不会被发送到服务器后端无需对路由路径做额外处理。1.2.2 BrowserRouter基于 HTML5 History API 的路由BrowserRouter 采用 HTML5 新增的 History APIpushState、replaceState等方法实现路由控制URL 格式与后端路由一致不包含锚点例如http://localhost:3000/about。History API 允许前端直接操作浏览器的历史记录栈实现 URL 变化而不刷新页面。特点URL 格式简洁美观与传统后端路由一致兼容性稍弱不支持 IE11 及以下版本但其实现的功能更符合现代前端开发需求且目前主流浏览器Chrome、Firefox、Edge 等均已完美支持需要后端配合配置当用户直接访问非根路径如http://localhost:3000/about时后端需将请求转发到根页面index.html否则会返回 404 错误因为后端不存在该路由路径。1.3 路由别名提升代码可读性在实际开发中为了简化代码并提升可读性通常会为路由组件设置别名使用as关键字实现。例如将BrowserRouter别名为Router避免在后续代码中重复书写冗长的组件名import { BrowserRouter as Router } from react-router-dom;这样的写法不仅简洁还能让其他开发者快速理解代码意图尤其在多人协作项目中统一的别名规范能提升代码可维护性。1.4 路由与性能优化组件懒加载单页应用的核心优势之一是加载速度快但如果应用规模较大一次性加载所有页面组件会导致初始加载体积过大影响首屏渲染速度。react-router-dom 结合 React 提供的lazy和Suspense组件实现路由级别的组件懒加载有效优化性能。懒加载核心逻辑仅当用户访问某个路由时才加载对应的组件而非在应用初始化时全部加载。例如用户访问根路径/时仅加载Home组件About组件暂不加载当用户跳转至/about路径时再动态加载About组件。这种方式能显著减小应用初始加载体积提升首屏加载速度是大型单页应用的必备优化手段。二、react-router-dom 核心路由类型react-router-dom 支持多种路由类型覆盖不同业务场景包括普通路由、动态路由、嵌套路由等每种路由都有其特定的使用场景和实现方式。2.1 普通路由基础路径匹配普通路由是最基础的路由类型通过固定的 URL 路径匹配对应的组件适用于页面路径固定的场景例如首页、关于页、联系页等。其核心是Route组件通过path属性指定路由路径element属性指定对应渲染的组件。示例代码import { Routes, Route } from react-router-dom; import Home from ../pages/Home; import About from ../pages/About; function RouterConfig() { return ( Routes Route path/ element{Home /} / {/* 根路径匹配 Home 组件 */} Route path/about element{About /} / {/* /about 路径匹配 About 组件 */} /Routes ); }注意Routes组件用于包裹一组Route组件相当于路由容器确保路由规则有序匹配每次仅渲染匹配到的第一个路由组件。2.2 动态路由路径参数传递在实际业务中很多页面路径并非固定例如商品详情页、用户个人中心等需要根据不同的 ID 展示不同内容。此时就需要使用动态路由通过在路径中定义参数占位符/:参数名实现路径参数的传递与接收。动态路由的路径格式通常为/product/:id、/user/:userId其中:id、:userId为参数占位符代表可变的参数值。2.2.1 动态路由定义Routes {/* 动态路由匹配 /user/123、/user/456 等路径 */} Route path/user/:id element{UserProfile /} / {/* 商品详情动态路由匹配 /products/789 等路径 */} Route path/products/:productId element{ProductDetail /} / /Routes2.2.2 路径参数接收在目标组件中可通过 react-router-dom 提供的useParams钩子函数获取动态路由传递的参数。useParams返回一个对象键为参数占位符名称值为 URL 中的实际参数值。示例UserProfile 组件import { useParams } from react-router-dom; export default function UserProfile() { // 获取动态路由参数 id const { id } useParams(); return ( div h1用户个人中心/h1 p用户 ID{id}/p /div ); }示例ProductDetail 组件import { useParams } from react-router-dom; export default function ProductDetail() { // 获取商品 ID 参数 const { productId } useParams(); return ( div h1商品详情/h1 p商品 ID{productId}/p /div ); }注意动态路由参数仅能传递简单的字符串类型数据若需传递复杂数据可结合查询参数Query String或状态管理工具如 Redux实现。2.3 通配路由404 页面匹配通配路由使用*作为路径匹配规则可匹配所有未被前面路由规则匹配到的路径主要用于实现 404 页面页面不存在提示。核心规则通配路由必须放在所有路由规则的最后因为路由匹配遵循“自上而下”的顺序若放在前面会优先匹配所有路径导致其他路由失效。示例代码import NotFound from ../pages/NotFound; Routes Route path/ element{Home /} / Route path/about element{About /} / {/* 通配路由匹配所有未被匹配的路径渲染 404 组件 */} Route path* element{NotFound /} / /Routes404 组件可结合useNavigate钩子实现自动跳转功能例如 6 秒后自动返回首页import { useNavigate, useEffect } from react-router-dom; const NotFound () { const navigate useNavigate(); useEffect(() { // 6 秒后自动跳转到首页 const timer setTimeout(() { navigate(/); }, 6000); // 清除定时器避免内存泄漏 return () clearTimeout(timer); }, [navigate]); return ( div h1404 Not Found/h1 p页面不存在6 秒后自动返回首页.../p /div ); }; export default NotFound;2.4 嵌套路由页面结构复用在复杂应用中页面通常存在公共结构如侧边栏、导航栏、页脚嵌套路由可实现公共结构的复用同时在公共结构中渲染不同的子路由内容。react-router-dom 中嵌套路由通过Outlet组件实现子路由内容的渲染。2.4.1 嵌套路由定义嵌套路由的核心是在父路由中通过children属性定义子路由父路由组件中通过Outlet组件指定子路由内容的渲染位置。示例产品模块嵌套路由import { Routes, Route, Outlet } from react-router-dom; import Product from ../pages/Product; import ProductDetail from ../pages/Product/ProductDetail; import NewProduct from ../pages/Product/NewProduct; function RouterConfig() { return ( Routes {/* 父路由产品列表页 */} Route path/products element{Product /} {/* 子路由商品详情页路径为 /products/:productId */} Route path:productId element{ProductDetail /} / {/* 子路由新增商品页路径为 /products/new */} Route pathnew element{NewProduct /} / /Route /Routes ); }注意子路由的path属性无需添加前缀/否则会被解析为绝对路径脱离父路由的嵌套关系。例如子路由pathnew对应绝对路径/products/new若写为path/new则对应绝对路径/new。2.4.2 Outlet 组件使用Outlet是 react-router-dom 提供的内置组件用于在父路由组件中预留子路由内容的渲染位置。当用户访问子路由路径时对应的子路由组件会自动渲染到Outlet所在位置。示例Product 父组件import { Outlet } from react-router-dom; export default function Product() { return ( div h1产品列表/h1 div classNameproduct-container {/* 侧边栏公共结构 */} aside ul li商品分类 1/li li商品分类 2/li /ul /aside {/* 子路由内容渲染位置 */} mainOutlet //main /div /div ); }当用户访问/products/123时Product组件的侧边栏会保持不变main区域会渲染ProductDetail组件访问/products/new时main区域会渲染NewProduct组件实现公共结构复用与子内容动态切换。2.5 鉴权路由路由守卫实现在实际应用中部分页面需要用户登录后才能访问如个人中心、支付页面鉴权路由也称路由守卫用于控制路由的访问权限未登录用户访问时会自动跳转到登录页。react-router-dom 中可通过自定义ProtectRoute组件实现鉴权逻辑。2.5.1 鉴权组件实现自定义ProtectRoute组件通过children属性接收需要鉴权的组件判断用户登录状态可通过localStorage、sessionStorage或状态管理工具存储登录状态未登录则通过Navigate组件跳转到登录页已登录则渲染目标组件。import { Navigate } from react-router-dom; // 鉴权路由组件 export default function ProtectRoute({ children }) { // 从 localStorage 获取登录状态登录成功时设置 localStorage.setItem(isLogin, true) const isLoggedIn localStorage.getItem(isLogin) true; // 未登录跳转到登录页 if (!isLoggedIn) { return Navigate to/login /; } // 已登录渲染目标组件 return div{children}/div; }2.5.2 鉴权路由使用在路由配置中将需要鉴权的路由组件用ProtectRoute包裹即可实现权限控制。import ProtectRoute from ../components/ProtectRoute; import Pay from ../pages/Pay; import Login from ../pages/Login; Routes Route path/login element{Login /} / {/* 支付页面需要鉴权 */} Route path/pay element{ ProtectRoute Pay / /ProtectRoute } / /Routes扩展鉴权逻辑可根据业务需求升级例如区分普通用户与管理员权限不同角色展示不同路由或结合接口请求验证 Token 有效性实现更严谨的权限控制。2.6 重定向路由路径跳转重定向路由用于将一个路径自动跳转到另一个路径例如旧路径废弃后将用户访问旧路径时重定向到新路径。react-router-dom v6 中Redirect组件已被Navigate组件替代Navigate组件通过to属性指定目标路径replace属性控制跳转方式。2.6.1 基础重定向示例将/old-path重定向到/new-pathimport { Navigate } from react-router-dom; Routes {/* 重定向访问 /old-path 自动跳转到 /new-path */} Route path/old-path element{Navigate to/new-path /} / Route path/new-path element{NewPath /} / /Routes2.6.2 replace 跳转模式Navigate组件默认使用push模式跳转会在浏览器历史记录栈中添加新记录用户点击后退按钮可返回上一页若添加replace属性则使用replace模式跳转会替换当前历史记录栈中的内容不会留下跳转痕迹用户点击后退按钮无法返回上一页。// replace 模式重定向替换当前历史记录 Route path/old-path element{Navigate replace to/new-path /} /使用场景登录页跳转至首页时通常使用replace模式避免用户点击后退按钮重新回到登录页普通页面跳转则使用默认的push模式。三、路由历史记录与跳转控制3.1 历史记录栈结构浏览器的历史记录采用栈结构存储遵循“先进后出”的原则。当用户通过路由跳转时本质上是对历史记录栈进行操作push跳转向栈中添加一条新的历史记录栈长度加 1replace跳转替换栈顶的历史记录栈长度不变后退操作弹出栈顶的历史记录栈长度减 1页面回到上一个路径。react-router-dom 中的Navigate组件、useNavigate钩子均基于此栈结构实现跳转控制。3.2 useNavigate 钩子编程式跳转除了通过Link组件实现声明式跳转react-router-dom 还提供useNavigate钩子用于在组件逻辑中实现编程式跳转如按钮点击后跳转、接口请求成功后跳转等。3.2.1 基础用法import { useNavigate } from react-router-dom; function Login() { const navigate useNavigate(); const handleLogin () { // 模拟登录接口请求成功 const loginSuccess true; if (loginSuccess) { // 存储登录状态 localStorage.setItem(isLogin, true); // 跳转到首页push 模式 navigate(/); // 若使用 replace 模式跳转navigate(/, { replace: true }); } }; return ( div h1登录页/h1 button onClick{handleLogin}登录/button /div ); }3.2.2 后退与前进操作useNavigate还支持通过传递数字参数实现后退、前进操作正数表示前进负数表示后退// 后退一页相当于浏览器的后退按钮 navigate(-1); // 前进一页相当于浏览器的前进按钮 navigate(1); // 后退两页 navigate(-2);四、单页应用与路由集成实战4.1 单页应用SPA的核心优势单页应用Single Page ApplicationSPA是基于前端路由实现的一种应用架构其核心特点是整个应用仅加载一个 HTML 页面后续页面切换均通过前端路由控制无需重新请求服务器。与传统多页应用的对比传统多页应用每次 URL 变化都会向服务器发送 HTTP 请求加载完整 HTML 页面页面会出现白屏、加载动画用户体验较差单页应用仅初始加载一次 HTML、CSS、JS 资源后续路由变化时前端通过捕获 URL 变化事件匹配对应的组件并渲染无页面刷新加载速度快用户体验流畅。react-router-dom 是构建 React 单页应用的核心工具结合 HTML5 History API 实现前端路由控制完美支撑单页应用的页面切换需求。4.2 完整路由集成案例以下结合前文知识点实现一个完整的 React 单页应用路由集成案例包含路由配置、组件懒加载、导航栏、鉴权控制、加载动画等功能。4.2.1 项目结构src/ ├── components/ // 公共组件 │ ├── Navigation.js // 导航栏组件 │ ├── ProtectRoute.js // 鉴权路由组件 │ └── LoadingFallback.js // 加载动画组件 ├── pages/ // 页面组件 │ ├── Home.js // 首页 │ ├── About.js // 关于页 │ ├── Login.js // 登录页 │ ├── Pay.js // 支付页需鉴权 │ ├── NotFound.js // 404 页面 │ └── Product/ // 产品模块 │ ├── Product.js // 产品列表页父路由 │ ├── ProductDetail.js // 商品详情页子路由 │ └── NewProduct.js // 新增商品页子路由 ├── router/ // 路由配置 │ └── index.js // 路由配置文件 ├── App.js // 根组件 └── index.js // 入口文件4.2.2 加载动画组件LoadingFallback.js用于懒加载组件加载过程中的占位展示结合 CSS 动画实现旋转加载效果import styles from ./index.module.css; export default function LoadingFallback() { return ( div className{styles.container} div className{styles.spinner} div className{styles.circle}/div div className{${styles.circle} ${styles.inner}}/div /div p className{styles.text}Loading.../p /div ); }对应的 CSS 样式index.module.css.container { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100vh; background-color: rgba(255, 255, 255, 0.9); } .spinner { position: relative; width: 60px; height: 60px; } .circle { position: absolute; width: 100%; height: 100%; border: 4px solid transparent; border-top-color: #3498db; border-radius: 50%; animation: spin 1s linear infinite; } .circle.inner { width: 70%; height: 70%; top: 15%; left: 15%; border-top-color: #e74c3c; animation: spin 0.8s linear infinite reverse; } keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } .text { margin-top: 20px; color: #2c3e50; font-size: 18px; font-weight: 500; animation: pulse 1s ease-in-out infinite; } keyframes pulse { 0% { opacity: 0.6; } 50% { opacity: 1; } 100% { opacity: 0.6; } }4.2.3 导航栏组件Navigation.js实现页面导航功能通过Link组件实现声明式跳转并通过useResolvedPath、useMatch钩子实现导航高亮效果import { Link, useResolvedPath, useMatch } from react-router-dom; export default function Navigation() { // 导航高亮逻辑 const isActive (to) { const resolvedPath useResolvedPath(to); const match useMatch({ path: resolvedPath.pathname, end: true, // 完全匹配路径 }); return match ? active : ; }; return ( nav style{{ background: #f5f5f5, padding: 10px }} ul style{{ listStyle: none, display: flex, gap: 20px, margin: 0, padding: 0 }} li Link to/ className{isActive(/)} style{{ textDecoration: none }} 首页 /Link /li li Link to/about className{isActive(/about)} style{{ textDecoration: none }} 关于我们 /Link /li li Link to/products className{isActive(/products)} style{{ textDecoration: none }} 产品列表 /Link /li li Link to/products/new className{isActive(/products/new)} style{{ textDecoration: none }} 新增商品 /Link /li li Link to/pay className{isActive(/pay)} style{{ textDecoration: none }} 支付中心 /Link /li li Link to/old-path className{isActive(/old-path)} style{{ textDecoration: none }} 旧路径测试重定向 /Link /li /ul /nav ); }说明end: true表示完全匹配路径例如/products不会匹配/products/123确保导航高亮的准确性active类名可结合 CSS 样式实现高亮效果如改变文字颜色、添加下划线。4.2.4 路由配置文件router/index.js结合组件懒加载、嵌套路由、鉴权路由、重定向等功能统一配置所有路由规则import { lazy, Suspense } from react; import { Routes, Route, Navigate } from react-router-dom; import LoadingFallback from ../components/LoadingFallback; import ProtectRoute from ../components/ProtectRoute; // 懒加载页面组件 const Home lazy(() import(../pages/Home)); const About lazy(() import(../pages/About)); const Login lazy(() import(../pages/Login)); const Pay lazy(() import(../pages/Pay)); const NotFound lazy(() import(../pages/NotFound)); const Product lazy(() import(../pages/Product/Product)); const ProductDetail lazy(() import(../pages/Product/ProductDetail)); const NewProduct lazy(() import(../pages/Product/NewProduct)); const NewPath lazy(() import(../pages/NewPath)); export default function RouterConfig() { return ( Suspense fallback{LoadingFallback /} Routes {/* 普通路由 */} Route path/ element{Home /} / Route path/about element{About /} / Route path/login element{Login /} / {/* 动态路由 嵌套路由 */} Route path/products element{Product /} Route path:productId element{ProductDetail /} / Route pathnew element{NewProduct /} / /Route {/* 鉴权路由 */} Route path/pay element{ ProtectRoute Pay / /ProtectRoute } / {/* 重定向路由 */} Route path/old-path element{Navigate replace to/new-path /} / Route path/new-path element{NewPath /} / {/* 通配路由404 */} Route path* element{NotFound /} / /Routes /Suspense ); }说明Suspense组件包裹所有路由fallback属性指定懒加载组件加载时的占位内容加载动画路由规则按“普通路由 → 嵌套路由 → 鉴权路由 → 重定向路由 → 通配路由”的顺序排列确保匹配逻辑正确。4.2.5 根组件App.js集成路由容器与导航栏作为应用的入口组件import { BrowserRouter as Router } from react-router-dom; import Navigation from ./components/Navigation; import RouterConfig from ./router; export default function App() { return ( Router {/* 导航栏全局公共组件 */} Navigation / {/* 路由配置 */} RouterConfig / /Router ); }4.2.6 页面组件示例Home.js、About.js// Home.js export default function Home() { console.log(首页组件加载); return ( div style{{ padding: 20px }} h1首页/h1 p欢迎访问 React 路由实战应用/p /div ); }// About.js console.log(About 组件加载日志); export default function About() { console.log(About 组件渲染); return ( div style{{ padding: 20px }} h1关于我们/h1 p这是一个基于 react-router-dom 构建的单页应用示例。/p /div ); }4.3 实战注意事项路由匹配顺序Routes组件会自上而下匹配路由通配路由必须放在最后否则会覆盖其他路由懒加载优化仅对非首屏组件使用懒加载首屏组件如 Home建议直接加载避免首屏加载过慢后端配置使用 BrowserRouter 时后端需配置路由转发确保所有路径都指向 index.html避免 404 错误内存泄漏防范使用useEffect实现自动跳转、定时器等功能时需清除副作用如定时器、事件监听导航高亮useMatch钩子的end属性需根据需求合理设置避免高亮错误。五、react-router-dom 核心原理剖析5.1 路由匹配原理react-router-dom 的路由匹配核心是“路径与组件的映射关系”其流程如下用户改变 URL通过点击 Link 组件、编程式跳转或手动输入 URL路由容器Router捕获 URL 变化事件HashRouter 监听hashchange事件BrowserRouter 监听popstate事件Routes组件遍历所有Route子组件根据path属性匹配当前 URL 路径匹配成功后渲染对应Route组件的element属性内容若未匹配到任何路由则渲染通配路由若存在。5.2 历史记录管理原理BrowserRouter 基于 HTML5 History API 实现历史记录管理核心 API 包括history.pushState(state, title, url)向历史记录栈添加一条新记录改变 URL 但不刷新页面history.replaceState(state, title, url)替换当前历史记录栈顶内容改变 URL 但不刷新页面popstate事件当用户点击后退、前进按钮或调用history.back()、history.forward()时触发路由容器通过监听该事件更新组件渲染。HashRouter 则通过监听hashchange事件捕获锚点变化无需依赖 History API兼容性更强但 URL 格式不够美观。5.3 嵌套路由实现原理嵌套路由的核心是Outlet组件其原理的本质是“父子路由的路径拼接与内容分发”父路由的path与子路由的path自动拼接形成完整的 URL 路径如父路由/products 子路由:productId→/products/:productId当用户访问子路由路径时路由系统同时匹配父路由与子路由父路由组件渲染时Outlet组件会接收路由系统传递的子路由组件将其渲染到指定位置实现父子路由内容的联动展示。六、常见问题与解决方案6.1 路由跳转后页面不刷新问题原因单页应用路由跳转本质是组件切换而非页面刷新若组件依赖 URL 参数或状态更新可能因未重新获取数据导致页面内容未更新。解决方案使用useEffect监听 URL 参数变化参数变化时重新请求数据import { useParams, useEffect } from react-router-dom; function ProductDetail() { const { productId } useParams(); useEffect(() { // 监听 productId 变化重新请求商品详情数据 fetchProductDetail(productId); }, [productId]); // ... }6.2 BrowserRouter 部署后刷新 404问题原因BrowserRouter 的 URL 路径与后端路由冲突用户直接访问非根路径时后端无法匹配该路径返回 404 错误。解决方案Nginx 配置在 Nginx 配置文件中添加路由转发规则将所有请求转发到 index.htmllocation / { root /usr/share/nginx/html; index index.html index.htm; try_files $uri $uri/ /index.html; # 路由转发 } root /usr/share/nginx/html; index index.html index.htm; try_files $uri $uri/ /index.html; # 路由转发 }Apache 配置修改 .htaccess 文件添加重写规则开发环境使用create-react-app时开发服务器已默认配置转发无需额外处理。6.3 懒加载组件加载失败问题原因组件路径错误、网络异常或Suspense组件使用不当。解决方案检查懒加载组件的导入路径是否正确确保路径与文件位置一致确保Suspense组件包裹懒加载组件且fallback属性设置有效添加错误边界组件Error Boundary捕获懒加载失败错误提升用户体验。6.4 导航高亮不准确问题原因useMatch钩子的end属性设置不当或路由路径重叠。解决方案精确匹配路径时设置end: true模糊匹配时省略该属性避免路由路径重叠例如/products与/products/new需确保父路由不设置end: true子路由正常匹配。七、总结与扩展7.1 核心知识点总结react-router-dom 是 React 单页应用的核心路由库其核心知识点可概括为两种路由模式HashRouter兼容性强与 BrowserRouterURL 美观需后端配置六大路由类型普通路由、动态路由、通配路由、嵌套路由、鉴权路由、重定向路由核心 API 与钩子Routes、Route、Link、Navigate、Outlet、useParams、useNavigate、useMatch等性能优化组件懒加载lazySuspense实战要点路由匹配顺序、后端配置、内存泄漏防范、导航高亮控制。7.2 扩展学习方向掌握基础用法后可进一步学习以下内容提升路由使用能力路由状态管理结合 Redux、React Context 实现路由状态全局共享高级鉴权逻辑基于角色的访问控制RBAC、Token 过期自动跳转路由动画结合 React Transition Group 实现页面切换动画多语言路由实现国际化路由如/en/about、/zh/aboutreact-router-dom v6 新特性对比 v5 版本的差异如Routes替代Switch、Navigate替代Redirect等。react-router-dom 是 React 开发的必备技能之一熟练掌握其用法与原理能有效提升单页应用的开发效率与用户体验。在实际开发中需结合业务场景灵活选择路由模式与实现方案不断优化路由配置与性能构建高质量的 React 应用。原文 https://juejin.cn/post/75962419