请阐述 React Router 从版本 3 升级到版本 4 时发生了哪些结构性变化,并列举新增的主要特性。
考察说明
考查对 React Router 主要版本更迭的理解,尤其是从集中式路由配置到组件化路由的范式转变。
回答思路
- 【回答框架 1】React Router 4 采用声明式组件化路由,路由规则直接作为组件写在应用内,路由嵌套通过组件组合实现;而 React Router 3 基于静态路由配置,路由集中在一个对象中,更接近传统服务端路由。
- 【回答框架 2】React Router 4 将路由拆分为多个包,如 react-router-dom、react-router-native,便于按需引入;核心库 react-router 不依赖 DOM 或 Native,使用时需选择对应平台包。
- 【回答框架 3】React Router 4 新增了诸如 withRouter、RenderProps 等特性,同时路由的匹配逻辑基于 Switch、Route 等组件,路由参数通过 match 对象传递,编程导航使用 history 对象。
- 【回答框架 4】迁移到 React Router 4 时,原有的 <Router> 历史监听方式被 history 包替代,路由嵌套由组件层级控制,原来的 <IndexRoute> 等配置方式不再适用,需要重构为组件形式。
- 【关键点 1】React Router 4 的核心理念是组件化路由,路由即组件。
- 【关键点 2】路由嵌套通过组件组合实现,取代了 v3 的集中式路由配置。
- 【关键点 3】拆分为多个包,如 react-router-dom,便于按环境选择。
- 【关键点 4】新增 withRouter 等 HOC,提供更灵活的路由参数传递。
- 【易错点 1】v4 中路由匹配不保证顺序,易出现多个路由同时匹配,需用 Switch 包裹。
- 【易错点 2】迁移时易忽略路由与组件解耦,导致过度依赖全局历史对象。