为啥react-router 6.x loader页面刷新获取不到store的值

125 阅读1分钟

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);
  });
}

添加 await new Promise((r) => setTimeout(r, 0)); 阻塞一下,发现就没问题了,

不知道是我的写法问题,还是咋地,在此记录一下