请说明在 React Router 中配置路由重定向的具体做法,包括使用哪个组件或 API,以及它适用于哪些场景?
考察说明
考查对 React Router 中重定向API的掌握及使用场景的理解。
回答思路
- 【回答框架 1】React Router 中用于重定向的组件是 Navigate,在 v6 中可通过声明式 JSX 直接使用,例如 <Route path="/old" element={<Navigate to="/new" replace />} />。v5 中常用 Redirect 组件,用法类似。
- 【回答框架 2】在路由配置层面,也可以使用 index 路由配合 Navigate 实现默认重定向,例如在父路由中设置 index route 重定向到默认子页面。
- 【回答框架 3】重定向适用于路由变更、默认页跳转、权限不足跳转等场景。若需要编程式导航,则使用 useNavigate 钩子,这不属于重定向组件。
- 【回答框架 4】注意 replace 属性用于替换历史记录,默认 push 会新增记录;对于重定向场景通常建议使用 replace,避免冗余历史。
- 【关键点 1】v6 使用 Navigate 组件,v5 使用 Redirect 实现重定向。
- 【关键点 2】重定向可作为路由配置中的 element,通过 JSX 声明式实现。
- 【关键点 3】重定向常用于默认页、旧路由迁移及权限跳转。
- 【关键点 4】编程式跳转使用 useNavigate,不属于重定向组件。
- 【关键点 5】使用 replace 可避免产生不必要的历史记录。
- 【易错点 1】不要将重定向与编程式导航 useNavigate 混淆。
- 【易错点 2】在 v6 中使用 Redirect 会报错,需使用 Navigate。
- 【易错点 3】重定向不适用于服务端渲染,仅客户端路由生效。