React-Router6版本的更新引起的路由用法变化

React Router应该是React生态系统中最受欢迎的库了，npm周下载量达600w+，github也有45.2k的加星，足以说明它是一款非常优秀的库，作为React社区重要的库，它经历了多次迭代和重大更改，就在上个月，更是迎来了一个大的正式版更新6.x，当前最新为6.0.2，相对比于之前的5.x版本做出了较大改变，不管从用法还是从性能上都有了明显的提升，本文也将用新老版本对比的方式让你能以最快的速度上手新用法

话不多说，先列出6.0做出的改变之处：

1. 用法变化
2. 替换为
3. 嵌套路由新写法
4. 推出全新hook，全面拥抱函数组件
5. 基于对象的路由，实现js配置所有路由
6. 整体代码比上个版本减小大约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/>} />
   </Routes>