React Router 是如何工作的？如何实现路由守卫？

1. React Router 的核心工作原理

React Router 是一个基于 React 的多策略路由器，通过 History API 拦截浏览器导航行为，在客户端完成路由切换和组件渲染，无需向服务器发起整页请求。当用户点击 <Link> 组件时，React Router 阻止默认的页面跳转行为，更新 URL，并根据当前 URL 匹配对应的 <Route> 组件进行渲染。

2. 动态路由参数

React Router 通过 :paramName 语法支持动态路由段，在组件内通过 useParams() Hook 读取参数值。useSearchParams() 提供对 URL 查询字符串的读写能力，类似 useState 的 API 设计。

3. 嵌套路由（Nested Routes）

嵌套路由是 React Router 的核心特性，允许子路由在父路由的布局组件（Layout）内部渲染。父组件通过 <Outlet /> 组件指定子路由的渲染位置，实现稳定的侧边栏、导航栏与动态内容区的组合布局。

4. 路由守卫的实现方式

React Router v6/v7 中，传统的 onEnter 回调已被更强大的 Loader 机制替代。路由守卫通过在路由配置中定义 loader 函数来实现：在渲染前执行鉴权检查，未登录用户通过 throw redirect('/login') 重定向到登录页，登录后可通过 location.state 回跳原目标页面。

5. React Router v7 的重要更新

React Router v7（2024 年末稳定发布，2026 年为主流版本）融合了 Remix 框架的能力，新增 Loader（数据加载）、Action（表单提交处理）、useNavigation()（导航状态监听）等 API，支持数据预加载和并行加载，大幅提升嵌套路由场景下的加载性能。