React中的loader组件返回undefined

Question

我试图获取产品 api 并在控制台日志中的加载器内，我可以看到三个产品的数组，但是当我导出它们并在另一个组件中使用它时，它返回未定义并破坏了我的应用程序。

我的代码： 在这个组件中，我可以在控制台日志中看到 3 个产品的数组

  import { FeaturedProducts, Hero } from "../components";
  import { customFetch } from "../utils";
  const url = "/products?featured=true";

  export const loader = async () => {
   const response = await customFetch(url);
   const products = response.data.data;
   console.log(products);
   return { products };
   };

   const Landing = () => {
    return (
    <>
     <Hero />
     <FeaturedProducts />
   </>
   );
  };
  export default Landing;`

`import { Link, useLoaderData } from "react-router-dom";
const ProductsGrid = () => {
console.log(useLoaderData()); //undefined

 return (
     <div className="pt-12 grid gap-4 md:grid-cols-2 lg:grid-cols-3 "></div>
  );
 };`

 export default ProductsGrid;`

知道为什么会发生这种情况吗？

Answer 1

我忘了将装载机添加到着陆路线

import { loader as landingLoader } from "./pages/Landing";
    const router = createBrowserRouter([
      {
        path: "/",
        element: <HomeLayout />,
        errorElement: <Error />,
        loader: landingLoader,
        children: [
          {
            index: true,
            element: <Landing />,
            errorElement: <ErrorElements />,
            loader: landingLoader,
          },