请解释 React Router 的作用,并列举常见的 Router 组件。
考察说明
考查对 React 路由核心概念和常用组件类型的掌握程度。
回答思路
- 【回答框架 1】React Router 是 React 应用中的路由管理库,其核心作用是根据 URL 变化渲染对应的组件,实现单页应用中的视图切换和导航,同时维护历史记录和路径匹配。
- 【回答框架 2】常用 Router 组件主要包括 BrowserRouter、HashRouter 和 MemoryRouter。BrowserRouter 基于 HTML5 History API,使用干净的 URL 路径,适合后端支持的生产环境;HashRouter 通过 URL 的 hash 部分进行路由,兼容性更好,适合静态文件部署;MemoryRouter 将路由状态保存在内存中,不依赖浏览器地址栏,常用于测试和非浏览器环境。
- 【回答框架 3】此外还有针对路由配置的组件,比如 Routes 和 Route,用于定义路径与组件的映射关系;Link 和 NavLink 用于页面跳转;Navigate 用于重定向。这些组件共同构成了 React Router 的声明式路由方案。
- 【关键点 1】React Router 实现 URL 与组件视图的同步映射,支持嵌套路由和动态路由参数。
- 【关键点 2】BrowserRouter 使用 History API,HashRouter 使用 hash 实现,MemoryRouter 不依赖浏览器。
- 【关键点 3】常用组件包括 Router 类、Route 类、Link 类以及导航相关组件。
- 【易错点 1】容易将 ServerRouter 与 BrowserRouter 混淆,前者用于服务端渲染场景。
- 【易错点 2】使用 HashRouter 时 URL 会包含 # 符号,对 SEO 不友好,但 BrowserRouter 需要服务器配合处理所有路径请求。