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

在 React Router 中,常见的路由模式分为哪几种?它们各自的工作原理和应用场景是什么?

前端/移动开发技术原理方案权衡ReactReact Router

考察说明

考查对 React Router 路由模式的理解,包括底层机制和适用场景。

回答思路

  1. 【回答框架 1】React Router 支持三种路由模式:HashRouter、BrowserRouter 和 MemoryRouter。HashRouter 使用 URL 的 hash 部分(例如 #/path)来同步路由,监听 hashchange 事件,刷新页面不会丢失状态,兼容性好,适合静态页面或与后端路由冲突的环境。
  2. 【回答框架 2】BrowserRouter 使用 HTML5 History API(pushState、popstate)来管理 URL,URL 美观、无 #,但需要服务器配合,将所有路由请求重定向到入口页面,否则刷新时会出现 404。
  3. 【回答框架 3】MemoryRouter 将路由状态保存在内存中,不改变 URL,适用于非浏览器环境(如 React Native、测试)或需要隔离路由状态的场景。
  4. 【关键点 1】三种模式:HashRouter、BrowserRouter、MemoryRouter。
  5. 【关键点 2】HashRouter 基于 hashchange,兼容性好,URL 带 #。
  6. 【关键点 3】BrowserRouter 基于 History API,URL 干净,需服务器支持。
  7. 【关键点 4】MemoryRouter 内存路由,不依赖浏览器 URL,用于测试等环境。
  8. 【易错点 1】BrowserRouter 在静态服务器上未配置重定向时,刷新页面会导致 404。
  9. 【易错点 2】MemoryRouter 在浏览器环境中无法通过浏览器前进后退按钮导航。