前言翻了翻ReactRouter的文档还好，发现已经推送到v6.2.2版本了。这个版本做了很多改动。让我们来看看。推出v6最大的原因是随着ReactHooks的出现，v6写的代码比v5写的代码更简洁优雅。我们通过代码感受一下。这是用v6写的伪代码。import{Routes,Route,useParams}from"react-router-dom";functionApp(){return(}/>);}functionHead(){让{id}=useParams();return(<>);}functionFooter(){let{id}=useParams();}这是v5写的伪代码import*asReactfrom"react";import{Switch,Route}来自“react-router-dom”；类App扩展了React。Component{render(){return(()}/>);}}classHeadextendsReact.Component{render(){return(<>);}}classFooterextendsReact.Component{render(){return(<>);这个例子表明Hooks消除了使用手动访问路由器内部状态的需要传递props将该状态传播到子组件的需要较小的AppBundle添加了哪些功能？升级为Routes里面的所有和都是相对的这使得和中的代码更精简且更可预测。路由是基于最佳匹配，而不是按顺序遍历。这避免了由于路由不可达而导致的错误。路由可以嵌套在一个地方，而不是分散在不同的组件中newhookuseRoutesbeforereact-router-config:importReact,{lazy}from'react';从“@components/PrivateRoute/index”导入PrivateRoute；constDashboard=lazy(()=>import('@pages/dashboard/index'));constAbount=lazy(()=>import('@pages/abount/index'));constroutes=[{path:'/home',component:Dashboard},{path:'/about',component:About},];constRouteWithSubRoutes=route=>();constrouteConfig=routes.map((route,i)=>);导出默认路由配置；现在函数App(){letelement=useRoutes([{path:'/',element:},{path:'users',element:,children:[{path:'/',element:},{path:':id',element:},{path:'me',element:},]}]);returnelement;}import{useHistory}from"react-router-dom";functionApp(){lethistory=useHistory();之前把useHistory换成useNavigate感觉更优雅函数handleClick(){history.push("/home");}return(gohome
);}现在导入{useNavigate}from"react-router-dom";functionApp(){letnavigate=useNavigate();functionhandleClick(){navigate("/home");}return(gohome
);}此更改在Route4.1中变化不大已删除，使用/*代替}/>`4.2使用而不是importProfilefrom'./Profile';//v5}/>//v6}/>4.3Outlet我们使用元素作为占位符。在的情况下，用户如何组件渲染？它的子路由。因此，或元素将根据当前位置呈现4.4import{BrowserRouter,Routes,Route,Link,Outlet}from'react-router-dom';functionApp(){return(}/>}>}/>}/>}/>);}functionUsers(){return(
);}体验v6这里我们使用create-react-app创建一个项目，安装完成后，进入项目，安装react-router-dom@6依赖$npxcreate-react-appreact-app$cdreact-app$npminstallreact-router-dom@6src/index.js在编辑器中打开，BrowserRouter从顶部附近导入react-router-dom并将包裹在//src/index.jsimport*从“react”作为React；从“react-dom”导入*作为ReactDOM；从“react-router-dom”导入{BrowserRouter}；导入“./index.css”；从“./App”导入App；导入*作为来自“./serviceWorker”的serviceWorker；ReactDOM.render(,document.getElementById("root"));打开src/App.js并用一些路由替换默认标记//App.jsimport*asReactfrom"react";import{Routes,Route,Link}from"react-router-dom";import"./App.css";functionApp(){return(W欢迎使用ReactRouter！
}/>}/>
);}运行npmstart你应该会看到Home标志如何升级到v6官方迁移指南在这里：ReactRouterv6迁移指南参考文章ReactRouterv6PreviewReactRouter结论如果你正在使用Hook来重构你的应用程序，我的建议是尝试重要的事情。如果你觉得这篇内容对你很有启发，别忘了点赞+关注哦。欢迎加我个人微信：Jiang9684，一起交流前端技术我的博客地址
