react路由

<think>好的，用户想了解React Router的使用指南及常见问题解决。首先，我需要整理React Router的基础概念和核心组件。根据引用[1]和[2]，要区分react-router和react-router-dom，用户可能容易混淆这两个库，所以需要先解释清楚它们的区别。接下来是基本使用，比如BrowserRouter、Routes和Route的配置，这些是搭建路由的基础。 然后，用户可能想知道如何进行路由跳转，比如使用Link组件或useNavigate钩子。引用[4]提到了Navigate组件和useNavigate，这部分需要详细说明，包括代码示例。另外，动态路由和参数传递也是常见需求，需要举例说明如何定义和获取路由参数。 常见问题方面，用户可能会遇到路由不匹配、嵌套路由配置错误、页面刷新后404等问题。需要根据引用[3]提到的安装注意事项，特别是版本问题，比如v6的变更可能导致的兼容性问题。同时，处理重定向和404页面也是常见问题，需要给出解决方案。 最后，引用中提到的安装命令和版本差异需要强调，确保用户正确安装react-router-dom，尤其是v6版本的改动较大，可能需要特别提示。总结时，要涵盖基础配置、导航方法、动态路由、常见问题及解决方法，并提供相关参考资料。同时，生成的问题要覆盖核心概念、版本差异、嵌套路由、路由守卫和最佳实践，帮助用户深入理解。</think>### React Router 使用指南及常见问题解决 #### 一、React Router 核心概念 1. **react-router 与 react-router-dom 的区别** - `react-router` 是路由核心库，提供基础功能（如路由匹配、导航逻辑）[^1]。 - `react-router-dom` 是浏览器环境专用库，包含 `BrowserRouter`、`Link` 等浏览器相关组件[^2]。 2. **路由模式选择** - `BrowserRouter`：基于 HTML5 History API（需服务器支持，适合现代浏览器） - `HashRouter`：通过 URL 哈希值实现（兼容旧浏览器） #### 二、基础配置 1. **安装与版本** ```bash npm install react-router-dom@6 # 推荐使用 v6 版本[^3] ``` 2. **基本路由定义** ```jsx import { BrowserRouter as Router, Routes, Route } from 'react-router-dom'; function App() { return ( <Router> <Routes> <Route path="/" element={<Home />} /> <Route path="/about" element={<About />} /> </Routes> </Router> ); } ``` #### 三、核心功能实现 1. **导航跳转** - 使用 `Link` 组件： ```jsx import { Link } from 'react-router-dom'; <Link to="/about">关于我们</Link> ``` - 编程式导航（`useNavigate` Hook）[^4]： ```jsx const navigate = useNavigate(); navigate('/profile'); ``` 2. **动态路由与参数传递** ```jsx <Route path="/users/:userId" element={<UserProfile />} /> // 获取参数 import { useParams } from 'react-router-dom'; const { userId } = useParams(); ``` 3. **嵌套路由** ```jsx <Route path="/dashboard" element={<Dashboard />}> <Route index element={<DashboardHome />} /> <Route path="settings" element={<Settings />} /> </Route> ``` #### 四、常见问题解决方案 1. **路由不匹配问题** - 现象：页面空白或 404 - 解决：添加兜底路由 ```jsx <Route path="*" element={<NotFoundPage />} /> ``` 2. **页面刷新后 404** - 原因：服务器未配置单页应用回退 - 解决：配置服务器（以 Nginx 为例）： ```nginx location / { try_files $uri $uri/ /index.html; } ``` 3. **v6 版本重大变更** - `Switch` 改为 `Routes`，且必须包裹在 `Router` 中 - 路由路径匹配规则更严格（区分大小写） 4. **路由守卫实现** ```jsx const PrivateRoute = ({ children }) => { const isAuth = checkLogin(); // 自定义认证逻辑 return isAuth ? children : <Navigate to="/login" />; }; // 使用 <Route path="/admin" element={<PrivateRoute><AdminPage /></PrivateRoute>} /> ``` #### 五、最佳实践 1. **代码分割与懒加载** ```jsx const About = React.lazy(() => import('./About')); <Route path="/about" element={<Suspense fallback="加载中..."><About /></Suspense>} /> ``` 2. **类型安全（TypeScript）** ```ts declare module 'react-router-dom' { interface ParamKey { userId: string; } } ``` --- §§ 相关问题 §§ 1. React Router v5 和 v6 的主要区别是什么？ 2. 如何实现路由切换时的动画效果？ 3. 怎样在 React Router 中处理权限验证？ 4. 服务端渲染（SSR）如何集成 React Router？ 5. React Router 的测试方法有哪些？ : 核心库与浏览器库的功能区分 : React Router 开源项目特性说明 : 版本安装注意事项 : 重定向实现方式