react-router 的使用遇到一个问题
import { createBrowserRouter, RouteObject } from 'react-router-dom';
import Layout, { layoutLoader } from '@/layout';
import Login, { loginLoader } from '@/pages/login';
import NotFound from '@/pages/notFound';
import { lazy } from 'react';
import { IconName } from '@/components/IconPark';
type LayoutRoutes = RouteObject & { name: string; iconName: IconName };
export const layoutRoutes: LayoutRoutes[] = [
{
index: true,
Component: lazy(() => import('@/pages/home')),
name: '首页',
iconName: 'Home',
},
{
path:'home2',
Component: lazy(() => import('@/pages/home2')),
name: '首页2',
iconName: 'Home',
},
];
const router = createBrowserRouter([
{
path: '/',
Component: Layout,
loader: layoutLoader,
children: layoutRoutes,
},
{
path: '*',
Component: NotFound,
},
{
path: 'login',
loader: loginLoader,
Component: Login,
},
]);
export default router;
在设置loader的时候遇到了一个问题
layoutLoader
export function layoutLoader() {
return new Promise(async (resolve) => {
const role = Store.store.getState().user.role;
if (!role) {
console.log(`!role`);
resolve(redirect('/login'));
}
resolve(null);
});
}
role 的值确定是有的,存在sessionStorage,但是我刷新页面的时候就是获取不到,会打印 "!role"
目前的解决方法
export function layoutLoader() {
return new Promise(async (resolve) => {
await new Promise((r) => setTimeout(r, 0));
const role = Store.store.getState().user.role;
if (!role) {
console.log(`!role`);
resolve(redirect('/login'));
}
resolve(null);
});
}