reactjs React路由器v6:在Loader函数中访问全局状态

wn9m85ua  于 2022-12-29  发布在  React
关注(0)|答案(1)|浏览(235)

我正在尝试react-router v6,但我觉得在谈到路由器loader s时,我遗漏了一个重要概念。例如,在react-router教程中,它讨论了/contacts/:contactId路由的loader,我了解到您可以轻松访问URL中包含的任何状态,如本例中的contactId。然而,我发现除了路由参数之外,我还需要userId之类的东西,通常我会通过prop或上下文提供程序获得这些东西,因为我希望使auth信息更具全局性,所以我很难了解如何访问loader函数内部的全局状态。
更具体地说,我的index.js文件是这样设置的,在这里我初始化router对象,然后将其传递给root.render()函数:

const router = createBrowserRouter([
  {
    path: "/",
    element: <App />,
    children: [
      {
        path: "/user-specific-resources",
        element: <UserResources />,
        loader: resourceLoader,
      },
  }
]);

const root = ReactDOM.createRoot(
  document.getElementById('root') as HTMLElement
);
root.render(
  <React.StrictMode>
    <RouterProvider router={router} />
  </React.StrictMode>
);

但是,/user-specific-resources路由的resourceLoader函数需要知道传递给服务器的userId/token。我知道可以像/user-specific-resources/:userId那样将userId作为路由参数传递,但这感觉有点尴尬,因为userId相当长。我知道我可以创建某种全局-包含用户状态的可访问对象并将其传递给返回用户感知加载器的工厂函数,eidogg. loader: resourceLoaderFactory(userStateManager)。但出于某种原因,对我来说,这似乎与react-router v6的精神背道而驰。所以我知道有办法实现这一点,但是我喜欢react-router在处理特定于路由的逻辑时能够很好地分离关注点,而我所想到的解决方案感觉有点笨拙。所以我的问题是,react-routerv 6是否有更优雅的方法来处理我在阅读文档时错过的这类事情,或者这只是当你离开教程中使用的玩具问题,开始编写更多“真实的世界”的代码时总是会出现的混乱?

nwlqm0z1

nwlqm0z11#

下面讨论这些问题:https://github.com/remix-run/react-router/issues/9324
这是我对这个问题的临时解决方案。你可以用一个使用钩子的自定义方法来 Package RouterProvider和路由创建。

const CustomRouterProvider = () => {
 const {userId, setUserId}= useState(); // or get it from context/custom hook

 const router = createBrowserRouter([
   {
     path: "/",
     element: <UserResources/>,
     loader: async () => {
           resourceLoader(userId);
         },
   },
 ]);

 return (
   <RouterProvider router={router} />
 );
}

ReactDOM.createRoot(document.getElementById('root')).render(
  <React.StrictMode>
      <CustomRouterProvider />
  </React.StrictMode>
)

相关问题