React-router 6 用法及知识点

标签

1<BrowserRouter>用于包裹整个应用(通常为App组件)
2<HashRouter>
说明：作用与BrowserRouter一样，但<HashRouter>修改的是地址栏的hash值
router6.X和router5.X相同，
3<Routes />和<Route />
v6版本移除了先前的<Switch >,引入了新的替代者：<Routes>
<Routes>包裹<Route>配合使用，
<Route>相当于一个 if 语句，如果其路径与当前URL匹配，则呈现其对应的组件
<Route caseSensitive>属性用于指  定：匹配时是否区分大小写，默认false
<Route>也可以嵌套使用，配合useRoutes()配置路由表，但需要通过Outlet组件来渲染其子路由
4<LINK>使用to参数来描述需要定位的页面。它的值既可是字符串，也可以是location对象（包含pathname、search、hash、与state属性）如果其值为字符串，将会被转换为location对象。
5<NavLink>与<Link>类似，且可实现导航的“高亮”效果
6<Navigate>
作用：只要<Navigate>组件被渲染，就会修改路径，切换视图
replace属性用于控制跳转模式（push或是replace，默认push）
7<Outlet>
当<Outlet>产生嵌套时，渲染其对应的后续子路由

Hooks:

1.useRotes()
根据路由表，动态创建<Routes>和<Route>
2.useNavigate()
作用：返回一个函数用来实现编程式导航
const navigate = useNavigate()
navigate('/login',{ replace:false, state:{a:1,b:2} })
第一种使用方式，指定具体的路径，
navigate( -1)
第二种使用方式，传入数值就行前进或后退，类似于5.X中的history.go( )方法，
3.useParams()
作用：回当前匹配路由的params参数，类似于5.x中的math.paramas
4.useSearchParams()
作用：用于读取和修改当前位置的URL中的查询字符串
返回一个包含两个值的数组，内容分别为：当前search参数，更新search的函数
const [search,setSearch] = useSearchParams();const id search.get('id');用search通过get方法需要单独取出
5.useLocation()
作用：获取当前location信息，对标5.X中的路由组件的location属性
const x=useLocation();console.log(x)；//{hash:"",key:"aaa",search:"?name=zs&age=18",state:{a:1,b:2} }
6.useMatch()
作用:返回当前匹配信息，对标5.X中的路由组件的match属性。
const match = useMatch( '/login/:x/:y' )
console.log(match)
{ params：{x:'1',y:'10'},pathname:"/LoGin/1/10",pathnameBase:"/LoGin/1/10",pattern:{path:'/login/:x/:y',caseSensitive:false,end:false} }
7.useInRouterContext处于路由的上下文当中会返回布尔值true
8.useNavigation Type() 判断路由跳转方式
作用：返回当前的导航类型（用户如何来到当前页的）
返回值：POP（浏览器刷新页面、在浏览器直接打开了这个路由组件）、PUSH、REPLACE
9.useOutlet() 用来呈现当前组件中要渲染的嵌套路由
const result = useOutlet();console.log(result)
如果嵌套路由没有挂载，则返回null;如果嵌套路由已挂载，则展示嵌套的路由对象
10.useResolvedPath() 截取路由内的路径和参数
作用:给定一个URL值，解析其中的：path\search\hash值

小记：

1.路由表统一管理路由：二级路由path后不用加/，直接写名称
2.需求如果是点击二级路由后一级路由设置成不高亮的话可以给App内标签<NavLink end>添加end属性
3.页面中to后边的路由可以不用加/，直接写地址
4.react-router5和6内都有Link和NavLink，点击后---才能变成<a />标签,6内有了一个新的Navigate,有机会渲染到页面上才做更新