如何理解react路由
React路由的基本概念
React路由是用于管理单页应用（SPA）中不同视图之间导航的库。通过动态加载组件，实现无页面刷新的内容切换。核心库react-router-dom提供了BrowserRouter、Route、Switch等组件。
核心组件及作用
BrowserRouter或HashRouter作为路由容器，包裹整个应用。Route组件定义路径与渲染内容的映射关系，通过path属性匹配URL，component或render属性指定渲染目标。Link和NavLink生成导航链接，后者支持活动状态样式。
动态路由与参数传递
路径参数通过冒号语法定义（如/user/:id），匹配的值可通过useParams钩子获取。查询参数使用useLocation解析URL中的search部分，或通过URLSearchParams处理。
import { useParams } from 'react-router-dom';
function UserPage() {
const { id } = useParams();
return <div>User ID: {id}</div>;
}嵌套路由的实现
在父路由组件中继续使用Route定义子路径，配合useRouteMatch获取匹配信息。嵌套布局可通过Outlet（v6+）或直接渲染子路由实现。
// React Router v6示例
<Route path="/dashboard" element={<Dashboard />}>
<Route path="stats" element={<Stats />} />
</Route>编程式导航方法
useNavigate钩子（v6+）或history对象（v5）提供跳转控制。可传递路径字符串或配置对象，支持状态传递和替换历史记录。
const navigate = useNavigate();
navigate('/login', { state: { from: '/' } });路由守卫与权限控制
通过高阶组件或自定义包装组件实现。在渲染目标路由前校验权限，未通过时重定向到登录页或显示无权限提示。
<Route path="/admin" element={<PrivateRoute><AdminPage /></PrivateRoute>} />常见问题处理
404页面通过path="*"捕获未匹配路由。懒加载使用React.lazy与Suspense组合优化性能。滚动恢复可配置<ScrollRestoration>组件（v6+）自动处理。
