配置路由表及登录态校验

前几天我完成了一个哔哩哔哩的博主视频下的一个react项目，借此项目来巩固学习的知识，这篇文章主要记录我在该项目用到的路由知识

配置路由表

在src下新建一个router文件夹，在router文件夹下新建index.js和router.js

router.js是将将项目中的所有路由引入并制作成一张路由表，在该文件下可以进行组件路由路径配置、组件路由名称配置、组件路由携带属性配置、路由的懒加载配置和路由缓存配置等。

具体配置代码：

//  router.js文件
import { lazy } from "react";
import Home from '../views/Home'
import { withKeepAlive } from 'keepalive-react-component';
const routes = [
    {
        path: '/',
        name: 'home',
        //  使用"keepalive-react-component"插件实现该页面缓存，即在跳转到其他页面后再次返回不会重新刷新页面，保持原有的滚动位置和数据
        component: withKeepAlive(Home, { cacheId: 'home', srcoll: true }),
        //  设置组件携带title
        meta: {
            title: '知乎日报-WebApp'
        }
    },
    {
        //  params形式路由传参，需要在路由表中提前留好参数位置
        path: '/detail/:id',
        name: 'name',
        component: withKeepAlive(lazy(() => import('../views/Detail')), { cacheId: 'detail', srcoll: true }),
        meta: {
            title: '新闻详情-知乎日报'
        }
    },
    {
        path: '/personal',
        name: 'personal',
        //  使用 lazy 实现路由懒加载
        component: lazy(() => import('../views/Personal')),
        meta: {
            title: '个人中心-知乎日报'
        }
    },
    // 剩下的配置大同小异，不在展示··········
];
//  暴露路由表
export default routes;

index.js文件是路由的真正配置文件，将router.js文件中导出的路由表使用map动态生成Route路由

//  router.js文件
export default function RouterView() {
    return (
        <Suspense fallback={<Mask visible={true}><DotLoading color="white" /></Mask>}>
            <Routes>
                {routers.map(item => {
                    let { name, path } = item;
                    return <Route key={name} path={path} element={<Element {...item} />} />;
                })}
            </Routes>
        </Suspense>
    )
};

• Suspense 是用在路由懒加载中，当路由页面没有渲染出来时，渲染fallback的返回值，fallback中的一般都是一个加载中的动画，用于减少白屏和过渡，提升体验，在这里我使用的是 antd-mobile 插件带的加载效果 Mask，可以自行去官网学习如何使用
• router6 使用关键字 Routes 包在 Route 外，取代了原先5时的 Switch
• 使用 map 循环生成 Route，key关键字是一定需要的，在所有使用到 map 生成的元素都必须要保证 key 值的唯一性
• element=<Element {...item} />是将路由信息传递给自己包装的 Element 组件，可以在 Element 组件中进行一些操作，比如传值，修改页面标题和登录态校验

//  Element组件+登录态校验
//  假定 checkList 中的路径是需要进行登录态校验的，该方法用于判断是否需要进行登录态校验操作
const isCheckLogin = (path) => {
    //  从redux中获取登录信息，base中存放了登录信息
    let { base: { info } } = store.getState(),
        checkList = ['/personal', '/store', '/update'];
    return !info && checkList.includes(path);
}

const Element = function Element(props) {
    //  接收{...item}中传过来的值，这些值其实都是路由表中对象的键值对信息（routes.js中配置的键值对信息），component是要作为组件的，所以需要重命名成首字母大写
    let { component: Component, meta, path } = props;
    //  调用函数，判断是否需要进行登录态校验，同时控制渲染的是组件还是 loading 效果
    let isShow = !isCheckLogin(path);
    //  用来更新函数组件
    let [_, setRandom] = useState(0);
    // 登录态校验 每次状态改变都需要判断是否需要登录态校验，否则只会在初始化时进行登录态校验
    useEffect(() => {
        if (isShow) return;
        // 如果info不存在，跳转的地址是三个中的一个，从服务器异步获取登录者信息，info存放的是登陆者的信息
        // 在此处用立即执行函数包 async，如果将 async 写在函数 function 处，将会返回一个 Promise 对象，该组件是用作渲染其他组件的，返回值必须为 jsx 不能为Promise
        (async () => {
            //  调用redux中的函数，从给定的接口中获取登录信息
            let infoAction = await actions.base.queryUserInfoAsync();
            let info = infoAction.info;
            if (!info) {
                // 获取后还是不存在，那么就是没有登陆，进行提示登录
                Toast.show({
                    icon: 'fail',
                    content: '请先登录'
                })
                // 跳转到登录页，replace 是在登陆组件时需要用到的，其实就是登录界面的返回前一个界面的功能问题
                navigate({
                    pathname: '/login',
                    search: `?to=${path}`
                }, { replace: true })
                return;
            }
            // 获取了信息,说明是登陆状态，派发任务把信息存储到容器中
            store.dispatch(infoAction);
            // 每次获取完登录信息后都需要更新组件，更新info，从而正确完成登录态校验
            setRandom(+new Date());
        })();
    });
    //修改页面的TITLE
    let { title = "知乎日报-WebApp" } = meta || {};
    document.title = title;
    //获取路由信息,基于属性传递给组件
    const navigate = useNavigate(),
        location = useLocation(),
        params = useParams(),
        [usp] = useSearchParams();
    return (
        <>
            {
                isShow ? <Component
                    navigate={navigate}
                    location={location}
                    params={params}
                    usp={usp} /> :
                    <Mask visible={true}>
                        <DotLoading color="white" />
                    </Mask>
            }
        </>
    )
};

最后，路由配置完需要在 App 中包裹上相应的插件,例如：BrowserRouter，KeepAliveProvider

import React from "react";
import { BrowserRouter } from 'react-router-dom';
import RouterView from "./router";
import { KeepAliveProvider } from "keepalive-react-component/lib";
const App = function App() {
    return (
        <BrowserRouter>
            <KeepAliveProvider>
                <RouterView />
            </KeepAliveProvider >
        </BrowserRouter>
    )
}
export default App;