react-router-dom v6中loader和路由守卫

        react-router-dom v6中新增了几个属性，这里主要记录下loader。

        loader只在数据路由中生效。

支持新API的数据路由：

• createBrowserRouter
• createMemoryRouter
• createHashRouter
• createStaticRouter

以下路由不支持数据 API：

• <BrowserRouter>
• <MemoryRouter>
• <HashRouter>
• <NativeRouter>
• <StaticRouter>

        一般项目中使用createBrowserRouter创建路由。

loader使用

createBrowserRouter([
  {
    path: "/teams/:teamId",
    loader: ({ params }) => {
      return fakeGetTeam(params.teamId);
    },
  },
]);

        loader函数会在路由加载前执行，相当于路由前置守卫。params为动态路由中传递的teamId参数对象，可以在loader中使用该对象调用接口，获取参数并return出去。

        loader函数return的值可以在该页面中使用useRouteLoaderData获取。

        但是不推荐这种写法，受接口响应速度影响，可能会造成跳转后白屏的情况。在react中，完全可以在useEffect中执行数据获取，搭配加载中动画可以较好的处理数据请求时的过渡，比直接在loader中请求数据好得多。

loader应用

        可以在loader中获取redux中的各类数据，token或者auth等，判断用户是否有资格跳转某个页面，如果没有，使用redirect跳到无权限页面，或者首页/登录页。

      {
        path: "page2/:id",
        element: PageLoading(<Page2 />),
        title: "Page2",
        icon: <SnippetsFilled />,
        auth: false,
        loader:()=>{
          let token = store.getState().user.token
          if(!token) return redirect("/home");
          return {a:123}
        }
      }

        可以基于这种用法实现前置路由守卫能力。

路由守卫另一种实现

另一种实现是以高级组件的形式实现，但是实现原理和loader是一致的。

function ContainerCom({comp}:{comp:ReactElement}){
  //具体逻辑不仅限于token判断，可以按需编辑
  const token = useAppSelector(store=>store.user.token)
  return (
    token?comp:<ErrorPage/>
  )
}

const routerObj: RouteType[] = [
  {
    path: "/",
    element: <App />,
    errorElement: <ErrorPage />,
    children: [
      {
        // path: "/",
        index:true,
        element: ContainerCom({comp:<Page1 />}),
        title: "page1",
        icon: <GoldFilled />,
        auth: false
      }
    ],
  }
];

关于routerObj的类型声明可以看我另一篇关于v6中自定义路由meta信息的文章：

react-router-dom6路由表中添加meta/自定义信息_react router 如何在路由上添加额外数据-CSDN博客