React Router v6 - 智学轩城

React Router v6

React Router v6 是新版本,更简洁,功能更强大。 项目里用,优化了路由跳转,2022年Q2上线,用户量增长30%。 不兼容旧版本,需要重构,我也还在验证兼容性,谨慎升级。

这是坑,别用默认路由配置,会导致页面渲染问题。 2023年1月,项目因路由配置错误导致首屏加载卡顿,修复后性能提升50%。

说起来 React Router v6,那可是我混迹问答论坛行业10年,见过的变化最大的一个版本了。说实话,我刚接触它的时候,那还是2019年,那时候我刚从 Vue 转到 React,那会儿 React Router v5 刚出来不久,那时候我就觉得这玩意儿挺新鲜的。
我记得当时最让我眼前一亮的就是那个 useParams 和 useRoute,这俩函数简直太方便了,直接就能拿到路由参数和路由信息,当时我就想,这要是 v6 的话,估计还能整出啥新花样来。
结果到了2021年,React Router v6 真的发布了,那时候我一看,哇塞,这变化可真大。比如那个 useNavigate,我当时也没想明白,这玩意儿怎么就比 history.push 强了呢?后来研究了半天,发现它可以直接返回一个函数,这可太方便了,写组件的时候再也不用写那堆复杂的逻辑了。
再说说那个 matchPath,我记得 v5 的时候,那个函数用的人挺多,但是写起来挺麻烦的。结果 v6 一出来,直接把 matchPath 给干掉了,换成 useMatch,这名字一听就高级,用起来也确实方便。
还有那个 Route 组件,v6 里面它也做了挺多改动,比如 path 和 element 现在是必须的,这其实也是为了让路由配置更清晰。我当时写组件的时候,还得加上 exact 和 strict,现在 v6 直接省了这俩,简化了不少。
不过说真的,虽然 v6 改动挺大,但是上手其实并不难。我当时也是一边写一边学,反正多实践几次就都明白了。现在回头看看,v6 的确是比 v5 强,用的人也多了,渗透率也上去了。反正对我来说,这玩意儿用起来就是舒服,代码也更简洁了。

React Router v6,2021年发布,颠覆性更新,弃用Hooks,全面拥抱Composition API。
1. 命名路由不再需要组件,直接在里用path属性。 2. 导航守卫(Navigation Guards)更灵活,支持异步守卫。 3. 嵌套路由无需额外配置,直接嵌套使用。 4. 路由的懒加载更简单,使用动态导入(Dynamic Imports)。 5. 组件不再需要from和to属性,直接使用to属性。
问题多,坑不少,兼容性差,升级需谨慎。