最近在搭建PC项目的React
框架,涉及到React Router,开发同学有时就需要去尝试点新的东西,在开发过程中才不会枯燥的,基于这个理念推动,就在搭建的时候用V6的版本开始了(虽然只是个新版本,也不算啥新东西)......
V6的版本相对于V5,做了很多的优化,有书写方面的、路由的嵌套、路由配置化、鉴权方面等等,下面就简单的介绍下如何使用
一、关于书写方面
路由注册的时候由的Switch改为了Routes
//V5版本 import {Route, Switch} from 'react-router-dom';//V6版本 import {Route, Routes } from 'react-router-dom';...... ...... ...... ......
不用Route标签包裹子组件,可以直接使用element属性,并且不需要exact来表示精准匹配,V6版本内部算法改变,它默认就是匹配完整路径,先后顺序不再重要,它能够自动找出最优匹配路径
//V5版本 import {Route, Switch} from 'react-router-dom';//V6的版本 import {Route, Routes } from 'react-router-dom';} />
将Redirect改为Navigate
//路由配置中 //V5代码如下 import { Redirect } from 'react-router-dom';//V6如下 import { Navigate } from 'react-router-dom'; } /> //组件内部 //V5版本 import { Redirect } from 'react-router-dom'; //重定向到首页 return //V6版本 import { Navigate } from 'react-router-dom'; //重定向到首页 return
用useNavigate替代useHistory使用
import {useNavigate} from 'react-router-dom'; const navigate = useNavigate(); //如去首页 navigate("/home"); //还可使用 navigate(-1); //后退到前一页 navigate(-2); //后退到前两页的前一页, navigate(1); //前向导航 等等依此类推
二、路由的嵌套方面优化
使用 Outlet
组件,此组件是一个占位符,告诉 React Router 嵌套的内容应该放到哪里。
//路由中} 我是嵌套子项