反应路由器V6.4.3 useLoaderData

Question

我对此很陌生，当我使用 V6.4.3 时，我发现它更新为似乎使用加载程序进行身份验证，因此我尝试简化原始方法。但是当我使用 时useLoaderData()，我变得未定义。

索引.js

const router = createBrowserRouter(
  createRoutesFromElements(
    <>
      <Route path="sign-in" element={<SignIn />} />    
      <Route path="/" element={<App />} errorElement={<LayoutError />}>
      <Route
        path="data"
        loader={() => { AuthProvider() }}
        element={<DataLayout />}
      />
      <Route path="about" element={<About />} />
      </Route>
    </>
));
ReactDOM.createRoot(document.getElementById('root'))
  .render(
    <ThemeProvider theme={theme}>
      <RouterProvider router={router} />
    </ThemeProvider>
  );

AuthProvider.js

export default function AuthProvider(){
  //{token: '4r8gjifendinsd'}
  const user = authService.getCurrentUser();
  //{"token":"asdasdasd"}
  console.log(JSON.stringify(user));
  if (!user.token) {
    throw redirect("/sign-in");
  }
  return user;
}

数据布局.js

export default function DataLayout() {
  const user = useLoaderData();
  //undefined
  console.log(user);
}

我查看了官方的github示例，Auth仍然是遗留方法，然后我又仔细查看了手册，只是为了确保useLoaderData接收到JSON。我是不是忽略了什么？

Answer 1

对我来说唯一不合适的是加载器函数没有返回任何值。

loader={() => { AuthProvider() }}应该：

• loader={() => {
    return AuthProvider();
  }}
  

• 或者更简洁地说，loader={() => AuthProvider()}

• 或者更简洁地说loader={AuthProvider}

例子：

<Route
  path="data"
  loader={AuthProvider}
  element={<DataLayout/>}
/>