升级到React-Router-v6
时间：2023-03-28 00:37:01
HTML
前言最近公司新项目开发完成，使用了最新版本的相关技术栈，而react-router也使用了v6版本，所以趁此机会自己整理一下reactrouterv5和v6的区别，以及v6的一些新特性。在原项目还在使用老版本react-router的情况下，不建议直接着急升级，可能会有很多变化。v5升级v6指南全部替换为v5//Category.tsxSwitch组件功能：渲染第一个由location匹配的或是子元素，只会渲染一条路径v6}path="/home">}path="/list">}path="/detail">}path="/category">{/*子级嵌套子路由，path为相对路径*/}}path="a">}path="b">的主要优势在于：Routes中所有的和路径都支持相对路由（以/开头的为绝对路由），这使得和to>中的代码更精简，更可预测。路由是基于最佳路径匹配，而不是顺序遍历。选中的路由可以嵌套在同一个地方，而不会分散在不同的组件中。注意：路由不能被认为是Switch的替代品。Switch功能只与Route组件匹配，但本身是可选的，可以使用Route组件代替Switch组件。但是只要使用了Route组件，v6的Routes组件是必须的，必须在最外层设置Routes才能使用Route组件，否则会报错。Route组件属性Route的render或者component改为element//v5//v6}path="/home">简化路径格式，只支持两种动态占位符：id动态参数*通配符，只能用在路径末尾，如users/*v6路径正确写法：/groups/groups/admin/users/:id/users/:id/messages/files/*/files/:id/*v6路径/users/:id的写法错误？//？不满足以上两种格式/tweets/:id(\d+)//存在正则表达式，不满足/files/*/cat.jpg/files-*路由匹配的大小写敏感。启用caseSensitivecaseSensitive，用于开启匹配路径时的忽略模式，即匹配时是否忽略大小写所有路径匹配都会忽略URL上的尾部斜杠NewOutlet组件功能：通常用于渲染子路由，类似于slot，用于匹配子路由elementexportdefaultfunctionCategory(){return(跳转到CategoryA
跳转到CategoryB
{/*子路由的自动匹配渲染*/}
- 当前页面：CategoryA
- 当前url：/category/a
- {/*/list*/}跳转到列表页
- {/*/category/b*/}跳转到category/b页
- {/*/category/a*/}跳转到当前路由
直接传状态属性//v5://v6:添加目标属性类型HTMLAttributeAnchorTarget='_self'|'_空白'|'_parent'|'_top'|(string&{})NavLink属性名称更改为移除activeStyle,activeClassName属性({color:isActive?'green':'blue'})}>消息RemoveRedirect去掉重定向组件的主要原因是不利于SEO//v5//v6使用Navigate组件代替}/>添加useNavigate代替useHistory功能组件，可以使用useHistory获取历史对象，用于页面跳转导航，参考前端高级面试题的详细解答//v5import{useHistory}from'react-router-dom'exportdefaultfunctionMenu(){consthistory=useHistory()return({history.push('/list')}}>程序化路由跳转列表页面
)}//v6import{useNavigate}from'react-router-dom'exportdefaultfunctionMenu(){constnavigate=useNavigate()return(
{navigate('/list')//相当于history.push}}>程序化路由跳转列表页面 )}下面列出其他的dif引用用法//v5history.replace('/list')//v6navigate('/list',{replace:true})//v5history.go(1)history.go(-1)//v6navigate(1)navigate(-1)添加useRoutes代替react-router-configuseRoutes根据生成相应的路由规则
中必须使用路由表useRoutesreact-router-config:用于集中管理路由配置components/List'functionApp(){constelement=useRoutes([{path:'/home',element:},{path:'/list',element:
},])返回element}exportdefaultApp添加useSearchParamsv6提供useSearchParams返回一个数组来获取和设置url参数('getParams',searchParams.get('name'))return({setSearchParams({name:'jacky'})}}>当前页面：详情点我设置url查询parameterasname=jacky 