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