=====欢迎来到编程星辰海的博客讲解======
看完可以给一个免费的三连吗,谢谢大佬!
目录
一、核心概念
1.1 核心组件
1.2 路由模式对比
二、核心代码示例
2.1 基础路由配置
2.2 动态路由示例
2.3 嵌套路由实现
2.4 完整示例代码
三、关键功能实现效果
四、学习要点总结
4.1 核心概念
4.2 最佳实践
4.3 常见问题
五、扩展阅读推荐
5.1 官方资源
5.2 优质文章
5.3 视频教程
六、实践案例:电商网站路由设计
一、核心概念
React Router 是 React 生态中最流行的路由解决方案,提供声明式的路由配置和导航功能,包含三个核心包:
- react-router:路由核心库
- react-router-dom:Web 专用路由库
- react-router-native:React Native 专用路由
1.1 核心组件
组件 | 作用描述 | 重要属性 |
---|---|---|
<BrowserRouter> | HTML5 history 模式路由容器 | basename |
<Routes> | 路由匹配容器组件 | - |
<Route> | 定义路由映射规则 | path, element |
<Link> | 声明式导航组件 | to, state |
<NavLink> | 带激活状态的 Link | className, style |
<Navigate> | 编程式导航组件 | to, replace |
<Outlet> | 嵌套路由占位符 | - |
1.2 路由模式对比
JAVASCRIPT
// 1. BrowserRouter(推荐) https://example.com/about // 2. HashRouter(兼容旧浏览器) https://example.com/#/about
二、核心代码示例
2.1 基础路由配置
JSX
// App.js import { BrowserRouter, Routes, Route, Link, Outlet } from 'react-router-dom'; // 页面组件 function Home() { return <h2>首页</h2> } function About() { return <h2>关于我们</h2> } 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> ); }
2.2 动态路由示例
JSX
// 产品详情页 function ProductDetail() { const { id } = useParams(); return <h2>产品ID: {id}</h2>; } // 路由配置 <Routes> <Route path="/products/:id" element={<ProductDetail />} /> </Routes>
2.3 嵌套路由实现
JSX
// 用户模块布局 function UserLayout() { return ( <div> <h3>用户中心</h3> <Outlet /> {/* 子路由渲染位置 */} </div> ); } // 路由配置 <Route path="/user" element={<UserLayout />}> <Route index element={<Dashboard />} /> <Route path="profile" element={<Profile />} /> <Route path="orders" element={<OrderList />} /> </Route>
2.4 完整示例代码
JSX
import React from 'react'; import { BrowserRouter, Routes, Route, Link, useParams, Navigate } from 'react-router-dom'; // 页面组件 function Home() { return <h2>首页</h2> } function About() { return <h2>关于我们</h2> } function ProductList() { return ( <div> <h2>产品列表</h2> <ul> {[1,2,3].map(id => ( <li key={id}> <Link to={`/products/${id}`}>产品{id}</Link> </li> ))} </ul> </div> ); } function ProductDetail() { const { id } = useParams(); return <h2>产品详情:{id}</h2>; } function NotFound() { return <h2>404 页面不存在</h2> } function App() { return ( <BrowserRouter> <nav style={{ padding: 20, background: '#eee' }}> <Link to="/" style={{ marginRight: 20 }}>首页</Link> <Link to="/about" style={{ marginRight: 20 }}>关于</Link> <Link to="/products">产品中心</Link> </nav> <Routes> <Route path="/" element={<Home />} /> <Route path="/about" element={<About />} /> <Route path="/products" element={<ProductList />} /> <Route path="/products/:id" element={<ProductDetail />} /> <Route path="/old-about" element={<Navigate to="/about" replace />} /> <Route path="*" element={<NotFound />} /> </Routes> </BrowserRouter> ); } export default App;
三、关键功能实现效果
这里我还存在问题,先给大家放大概图看看,到时候我还要再试试
[首页] [关于] [产品] [用户中心] [错误链接] |
---|
🏠 首页 |
欢迎来到网站主页 |
OR |
📦 产品列表 |
• 产品 A |
• 产品 B |
• 产品 C |
OR |
👤 用户中心 |
[仪表盘] [个人资料] |
📊 用户仪表盘 |
OR |
⛔ 404 页面未找到 |
请检查您访问的URL是否正确 |
- 基础导航切换
- 动态路由参数展示
- 嵌套路由层级显示
- 编程式导航跳转
- 404页面处理
四、学习要点总结
4.1 核心概念
- 路由配置必须包裹在
<BrowserRouter>
中 <Routes>
自动选择最佳匹配路由element
属性接收React组件(v6新特性)- 动态参数使用
:paramName
语法 - 索引路由使用
index
属性标记
4.2 最佳实践
- 使用
<Link>
代替<a>
标签避免页面刷新 - 嵌套路由配合
<Outlet>
实现布局复用 useNavigate
实现编程式导航useLocation
获取路由状态信息loader
和action
处理数据加载(v6.4+)
4.3 常见问题
JAVASCRIPT
// 错误:直接使用<a>标签 <a href="/about">关于</a> ❌ // 正确:使用Link组件 <Link to="/about">关于</Link> ✅ // 路由匹配优先级问题 <Route path="users/:id" /> <Route path="users/new" /> ❌ 顺序错误 // 正确顺序 <Route path="users/new" /> <Route path="users/:id" /> ✅
五、扩展阅读推荐
5.1 官方资源
- React Router 官方文档
- GitHub 仓库
- 官方示例集合
5.2 优质文章
- React Router v6 完全指南
- 深度解析路由鉴权方案
- 路由懒加载最佳实践
5.3 视频教程
- React Router v6 官方教学视频
- 全栈路由配置指南
- 实战电商网站路由设计
六、实践案例:电商网站路由设计
JSX
// routes.js const routes = [ { path: '/', element: <MainLayout />, children: [ { index: true, element: <HomePage /> }, { path: 'products', element: <ProductListPage /> }, { path: 'products/:slug', element: <ProductDetailPage /> }, { path: 'cart', element: <CartPage /> }, { path: 'dashboard', element: <RequireAuth><DashboardLayout /></RequireAuth>, children: [ { index: true, element: <OrderHistory /> }, { path: 'settings', element: <AccountSettings /> } ] }, { path: '*', element: <NotFoundPage /> } ] } ]; // 路由守卫组件 function RequireAuth({ children }) { const auth = useAuth(); const location = useLocation(); if (!auth.user) { return <Navigate to="/login" state={{ from: location }} replace />; } return children; }
通过本教程,大家可以掌握React Router的核心用法,建议结合官方文档和实际项目进行实践练习。路由配置需特别注意组件层级和匹配顺序,动态路由参数处理要考虑边界情况,嵌套路由是实现复杂布局的利器。