前端/移动开发面试题更新 2026-08-05

请说明在 React Router 中配置路由重定向的具体做法,包括使用哪个组件或 API,以及它适用于哪些场景?

前端/移动开发技术原理ReactReact Router

考察说明

考查对 React Router 中重定向API的掌握及使用场景的理解。

回答思路

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