请描述在 React 应用中配置 React Router 以完成路由切换的具体步骤和方法。

回答思路

1. 【回答框架 1】React Router 是 React 应用的标准路由库，通过声明式组件管理 URL 与 UI 的同步。核心组件包括 BrowserRouter 或 HashRouter 作为顶层路由器，Routes 和 Route 用于定义路径与组件的映射，Link 或 NavLink 用于页面跳转。
2. 【回答框架 2】配置步骤：安装 react-router-dom，在入口文件用 BrowserRouter 包裹应用，然后在组件中定义 Routes，每个 Route 指定 path 和 element。例如 `<Route path="/about" element={<About />} />`。
3. 【回答框架 3】路由切换机制：用户点击 Link 时，Router 更新 URL，Routes 根据当前路径匹配对应 Route 渲染组件。可通过 useNavigate 进行编程式导航，或使用 Navigate 组件重定向。
4. 【回答框架 4】动态路由通过路径参数如 `/user/:id` 实现，组件内用 useParams 获取参数。嵌套路由通过 Route 内嵌子 Route 实现，结合 Outlet 渲染子路由内容。
5. 【回答框架 5】默认路由使用 index 标记，404 页面通过 `path="*"` 定义。
6. 【关键点 1】使用 Routes 和 Route 组件定义路由映射。
7. 【关键点 2】Link 和 useNavigate 实现导航。
8. 【关键点 3】动态参数用 useParams 获取。
9. 【关键点 4】嵌套路由用 Outlet 展示子路由。
10. 【易错点 1】忘记用 Router 组件包裹应用导致路由无法工作。
11. 【易错点 2】Route 的 path 必须与 Routes 的层级结构匹配，否则可能渲染空白。
12. 【易错点 3】在 v6 版本中，使用 element 而非 component 属性。