React路由场景下如何将API数据传递给其他组件？

问题原因 #

你在Route组件上直接添加allData={allData}是无效的——这些props是传给Route本身的，并不会传递给element里的<All />组件，所以All组件接收的allData自然是undefined。而直接渲染<All allData={allData} />时props传递逻辑正常，因此能正常拿到数据。

解决方案 #

方法1：直接在element中传递props（最简单） #

修改App.js里的路由配置，把allData作为props直接传给<All />组件：

// App.js 修改后的Routes部分
<Routes>
  <Route path="/" element={<All allData={allData} />} />
  <Route path="mens" element={<Mens />} />
  <Route path="women" element={<Women />} />
  <Route path="kids" element={<Kids />} />
</Routes>

All.js无需修改，保持原代码即可。

方法2：添加加载状态（可选优化） #

由于API请求是异步的，初始状态allData是空数组，虽然map不会报错，但可以添加加载提示提升用户体验：

// All.js 修改后
function All({ allData }) {
  if (allData.length === 0) {
    return <div>加载中...</div>;
  }

  return (
    <div>
      <div className="card-holder">
        <div className="card">
          {allData.map((item) => (
            <ShopingCard
              key={item.id}
              image={item.image}
              name={item.name}
              price={item.price}
              description={item.description}
              category={item.category}
            />
          ))}
        </div>
      </div>
    </div>
  );
}

方法3：使用React Router Loader（适合复杂场景） #

如果你的项目使用React Router v6.4+，可以用loader函数在路由层面获取数据，再通过useLoaderData在组件中读取：

1. 修改App.js的路由配置：

// App.js
import { createBrowserRouter, RouterProvider } from 'react-router-dom';

const router = createBrowserRouter([
  {
    path: "/",
    element: <All />,
    loader: async () => {
      const response = await fetch("http://localhost:3004/dresses");
      return response.json();
    },
  },
  { path: "mens", element: <Mens /> },
  { path: "women", element: <Women /> },
  { path: "kids", element: <Kids /> },
]);

function App() {
  return (
    <div>
      <Navbar />
      <RouterProvider router={router} />
    </div>
  );
}

2. 修改All.js使用useLoaderData：

// All.js
import { useLoaderData } from 'react-router-dom';

function All() {
  const allData = useLoaderData();

  if (!allData || allData.length === 0) {
    return <div>加载中...</div>;
  }

  return (
    <div>
      <div className="card-holder">
        <div className="card">
          {allData.map((item) => (
            <ShopingCard
              key={item.id}
              image={item.image}
              name={item.name}
              price={item.price}
              description={item.description}
              category={item.category}
            />
          ))}
        </div>
      </div>
    </div>
  );
}

内容的提问来源于stack exchange，提问作者Shanmugaraj.s