详细讲一下React中的路由React Router

1. 基本概念

React Router 是 React 的路由管理库，用于在 React 应用中实现页面导航和路由控制。

2. 安装

npm install react-router-dom

3. 基础用法

// App.jsx
import { BrowserRouter, Routes, Route, Link } from 'react-router-dom'function App() {return (<BrowserRouter>{/* 导航链接 */}<nav><Link to="/">首页</Link><Link to="/about">关于</Link><Link to="/user">用户</Link></nav>{/* 路由配置 */}<Routes><Route path="/" element={<Home />} /><Route path="/about" element={<About />} /><Route path="/user" element={<User />} /></Routes></BrowserRouter>)
}

4. 路由类型

1. BrowserRouter：使用 HTML5 history API

<BrowserRouter>{/* 你的应用 */}
</BrowserRouter>

2.HashRouter：使用 URL 的 hash 部分

<HashRouter>{/* 你的应用 */}
</HashRouter>

5. 路由导航

1.声明式导航（Link组件）：

<Link to="/about">关于我们</Link>
<Link to="/user/123">用户详情</Link>

2.编程式导航（useNavigate钩子) :

import { useNavigate } from 'react-router-dom'function LoginButton() {const navigate = useNavigate()const handleLogin = () => {// 登录成功后跳转navigate('/dashboard')// 带参数跳转navigate('/user', { state: { id: 123 } })// 返回上一页navigate(-1)}return <button onClick={handleLogin}>登录</button>
}

6. 路由参数

1. URL参数：

// 路由配置
<Route path="/user/:id" element={<UserDetail />} />// 组件中获取参数
import { useParams } from 'react-router-dom'function UserDetail() {const { id } = useParams()return <div>用户ID：{id}</div>
}

2. 查询参数：

// 使用查询参数
<Link to="/search?keyword=react">搜索</Link>// 获取查询参数
import { useSearchParams } from 'react-router-dom'function Search() {const [searchParams] = useSearchParams()const keyword = searchParams.get('keyword')return <div>搜索关键词：{keyword}</div>
}

7. 嵌套路由

function App() {return (<Routes><Route path="/" element={<Layout />}><Route index element={<Home />} /><Route path="about" element={<About />} /><Route path="users" element={<Users />}><Route path=":id" element={<UserDetail />} /></Route></Route></Routes>)
}// Layout组件
function Layout() {return (<div><nav>{/* 导航栏 */}</nav><Outlet /> {/* 子路由渲染位置 */}</div>)
}

8. 路由守卫（保护路由）

function PrivateRoute({ children }) {const isAuthenticated = checkAuth() // 检查用户是否登录if (!isAuthenticated) {return <Navigate to="/login" replace />}return children
}// 使用
<Route path="/dashboard" element={<PrivateRoute><Dashboard /></PrivateRoute>} 
/>

9. 路由钩子

// 1. useLocation - 获取当前路由信息
function Component() {const location = useLocation()console.log(location.pathname) // 当前路径console.log(location.search)   // 查询参数console.log(location.state)    // 路由状态
}// 2. useNavigate - 编程式导航
function Component() {const navigate = useNavigate()navigate('/path')
}// 3. useParams - 获取URL参数
function Component() {const { id } = useParams()
}// 4. useSearchParams - 获取查询参数
function Component() {const [searchParams, setSearchParams] = useSearchParams()
}

10. 实际应用示例

// 完整的路由配置示例
import { BrowserRouter, Routes, Route, Navigate } from 'react-router-dom'function App() {return (<BrowserRouter><Routes>{/* 公共路由 */}<Route path="/" element={<Layout />}><Route index element={<Home />} /><Route path="about" element={<About />} /><Route path="products" element={<Products />}><Route path=":id" element={<ProductDetail />} /></Route>{/* 需要认证的路由 */}<Route path="dashboard" element={<PrivateRoute><Dashboard /></PrivateRoute>}><Route path="profile" element={<Profile />} /><Route path="settings" element={<Settings />} /></Route>{/* 404页面 */}<Route path="*" element={<NotFound />} />{/* 重定向 */}<Route path="old-path" element={<Navigate to="/new-path" replace />} /></Route></Routes></BrowserRouter>)
}

11. 最佳实践

1.路由配置集中管理：

// routes.js
const routes = [{path: '/',element: <Layout />,children: [{ index: true, element: <Home /> },{ path: 'about', element: <About /> },{ path: 'users', element: <Users /> }]}
]// App.jsx
import { useRoutes } from 'react-router-dom'function App() {const element = useRoutes(routes)return element
}

2.懒加载路由：

import { lazy, Suspense } from 'react'const Dashboard = lazy(() => import('./pages/Dashboard'))function App() {return (<Routes><Route path="/dashboard" element={<Suspense fallback={<Loading />}><Dashboard /></Suspense>} /></Routes>)
}

这些内容涵盖了 React Router 的主要使用方法。记住：