前言2018年初，ReactRouter的主要开发者创建了一个轻量级的替代品ReachRouter。原来是相互竞争，没想到直接合并了ReactRouter（真香！）目前v6是测试的最后一个版本。估计新特性如下：改名为。的新功能更改。嵌套路线变得更容易了。使用useNavigate而不是useHistory。新钩子useRoutes而不是react-router-config。尺寸缩减：从20kb到8kb1。重命名为顶级组件将被重命名。但是，它的功能在很大程度上保持不变（嘿，乱七八糟）。//v5//v6}/>}/>2.的新特性变化component/render被element取代总而言之，简而言之。它变得更好了。importProfilefrom'./Profile';//v5()}//v6}/>}/>3.嵌套路由变得更简单具体的变化如下：已经改为接受子路由。比和更简单的匹配规则。路径层次更清晰。3.1简化的嵌套路由定义v5中的嵌套路由必须定义得非常明确，需要在这些组件中包含大量的字符串匹配逻辑（好久不见，终于意识到这个问题了。)再看前面的处理：//v5import{BrowserRouter,Switch,Route,Link,useRouteMatch}from'react-router-dom';functionApp(){return();}functionProfile(){let{path,url}=useRouteMatch();return(
);}并且在v6中，可以去掉字符串匹配逻辑。不需要任何useRouteMatch()！//v6import{BrowserRouter,Routes,Route,Link,Outlet}from'react-router-dom';functionApp(){return(}/>}/>);}functionProfile(){return(}/>}/>
);}当然还有一个比较酸的操作，直接在route中定义的，然后使用下一个新API：Outlet3.2新API：Outlet这个东西很像{this.props.children}，具体用法见如下示例：functionApp(){return(}/>}>}/>}/>);}functionProfile(){return({/*会渲染或*/>
)}3.3多个以前我们只能在一个Routes中使用ReactApp但现在我们可以在ReactApp中使用多个路由，这将有助于我们基于不同的路由管理多个应用程序逻辑。importReactfrom'react';import{Routes,Route}from'react-router-dom';functionDashboard(){return();}functionApp(){return(}/>}/>);}4.使用useNavigate而不是useHistory来改变清楚处一眼就瞎了。..总感觉ReactRouter团队有点像个笑话。..//v5import{useHistory}from'react-router-dom';functionMyButton(){lethistory=useHistory();functionhandleClick(){history.push('/home');};return提交;};现在，history.push()将被navigation()取代：//v6import{useNavigate}from'react-router-dom';functionMyButton(){letnavigate=useNavigate();functionhandleClick(){navigate('/home');};return提交;};history的用法也将替换为：//v5history.push('/home');history.replace('/home');//v6navigate('/home');navigate('/home',{replace:true});强制达成共识5.新的hookuseRoutes取代了react-router-config。感觉又是一波强制挂钩，不过还是比之前简洁了一点。..functionApp(){letelement=useRoutes([{path:'/',element:},{path:'dashboard',element:},{path:'invoices',element:,children:[{path:':id',element:},{path:'sent',element:}]},//重定向{path:'home',redirectTo:'/'},//404notfound{path:'*',element:}]);returnelement;}6.体积缩减：从20kb到8kbReactRouterv6给我们带来便利的同时，包的体积也减少了一半以上。..感觉可以看看源码。..7.迁移等重要修复...官方迁移指南在这里：ReactRouterv6迁移指南其实上面罗列的新特性基本就是迁移的全部内容了。基本启动方法是更新包：$npminstallreact-router@6react-router-dom@6#or,foraReactNativeapp$npminstallreact-router@6react-router-native@6其中，我觉得有一点需要特别注意的是:ReactRouterv6使用简化的路径网格，只支持两种类型的占位符：dynamic:id样式参数和*通配符以下是v6中有效的路由路径：/groups/groups/admin/users/:id/users/：id/messages/files/*/files/:id/*/files-*RegExp匹配的路径将无效：/users/:id?/tweets/:id(\d+)/files/*/cat.jpgv6Trailing对于所有路径匹配，将忽略URL上的“/”。实际上，已被删除并且在v6中没有影响。这并不意味着您不需要使用斜线。v5之前的路径，存在路由歧义Currentpath:"/users"，那么会跳转到。当前路径：“/users/”，然后将跳转到。ReactRouterv6通过删除尾随的“/”修复了这种歧义：当前路径：“/users”，然后将跳转到。当前路径：“/users”，然后将跳转到。它的形式更像是命令行的用法cd://当前路径是/app/dashboard//////////命令行当前路径为/app/dashboardcdstats//pwdis/app/dashboard/statscd../stats//pwdis/app/statscd../../stats//pwdis/statscd../../../stats//pwdis/stats
