React Router 是 React 生态中用于实现单页应用(SPA)路由的核心库,帮助开发者管理应用的导航与动态内容加载。以下是其关键特性与使用场景:
📌 核心功能
- 动态路由匹配:通过
path
定义路由规则,支持嵌套路由与参数捕获
示例:<Route path="/user/:id" element={<User />} />
- 导航组件:
<BrowserRouter>
/<HashRouter>
实现浏览器历史栈或 URL 哈希模式 - 嵌套路由:支持子路由结构,适用于多层级页面布局
- 编程式导航:通过
useNavigate
或history
对象实现跳转逻辑
🧠 使用场景
- 单页应用(SPA)
例如:博客系统、电商详情页 - 多页面应用(MPA)
通过Outlet
实现页面嵌套,减少重复代码 - 动态加载数据
结合loader
函数实现异步数据预加载