在React里面,它不像Vue一样,为我们提供和很多方便的功能,一些功能都需要自己去进行封装比如说路由拦截,也需要自己进行封装。
1.创建路由
import { useRoutes, useLocation, Outlet } from "react-router-dom";
import { Navigate } from "react-router";
import { Suspense, useState, useEffect } from "react";
import Home from '../pages/home'
import HomeOne from '../pages/homeone'
import HomeTwo from '../pages/hometwo'
const Myrouters = [
{
path:'/',
element:<Navigate to='/home'></Navigate>
},
{
path:'/home',
element:<Home></Home>
},
{
path:'/homeone',
element:<HomeOne></HomeOne>
},
{
path:'/hometwo',
element:<HomeTwo></HomeTwo>
},
];
const Router = () => (
<Suspense fallback={<div>loading</div>}>{useRoutes(Myrouters)}</Suspense>
);
export { Router };
可以看到我创建了三个路由,home,hometwo,homethree,接下来可以在app.jsx进行引入,然后将其已组件的形式使用。
如:<Router></Router>
2.全局守卫
在上面代码修改如下,向外多暴露了一个RouterBeforeEach,也需要在app.jsx引入。
const RouterBeforeEach = () => {
const location = useLocation();
const navigator =useNavigate()
useEffect(() => {
if(location.pathname=='/home'){
navigator('/hometwo')
}
});
return <Outlet />
};
export { Router, RouterBeforeEach };
RouterBeforeEach是一个用来监听路由变化的组件每一次路由变化都会触发useEffect函数,通过Outlet返回一个路由出口,不影响其它路由zujian,这个时候我们可以通过useLocation来获取路由的信息比如对home进行一个限制不让你进入。通过location.pathname获取跳转路由的名称,让其如果进入home跳转hometwo,代码如下
const RouterBeforeEach = () => {
const location = useLocation();
const navigator =useNavigate()
useEffect(() => {
if(location.pathname=='/home'){
navigator('/hometwo')
}
});
return <Outlet />
};