React Router应该是React生态系统中最受欢迎的库了,npm周下载量达600w+,github也有45.2k的加星,足以说明它是一款非常优秀的库,作为React社区重要的库,它经历了多次迭代和重大更改,就在上个月,更是迎来了一个大的正式版更新6.x,当前最新为6.0.2,相对比于之前的5.x版本做出了较大改变,不管从用法还是从性能上都有了明显的提升,本文也将用新老版本对比的方式让你能以最快的速度上手新用法
话不多说,先列出6.0做出的改变之处:
- 用法变化
-
替换为 - 嵌套路由新写法
- 推出全新hook,全面拥抱函数组件
- 基于对象的路由,实现js配置所有路由
- 整体代码比上个版本减小大约70%
用法变化
组件变化较大,移除了component与render属性,使用element属性替代,因为与之前的版本代码写法不能兼容,写法区别如下
// 5.x用法
<Route path="/home" component={Home} />
<Route path="/login" render={()=><Login/>}/>
// 6.x用法
<Route path="/home" element={<Home/>} />
<Route path="/login" component={<Login/>} />
替换为
v6版本移除了
// 5.x用法
<Switch>
<Route path="/home" component={Home} />
<Route path="/login" component={Login} />
</Switch>
// 6.x用法
<Routes>
<Route path="/home" element={<Home/>} />
<Route path="/login" component={<Login/>} />
</Rou