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