在 React 中在路由和嵌套路由之间传递数据

Question

使用 React Hooks 和 React Router v6，如何在父 Events 加载和定义数据，然后将事件数据的子集传递给动态嵌套路由 -- campaign。我计划在 Events 路线中定义和设置活动状态。

由于我在 index.js 文件上定义路由，因此我试图了解如何最好地将此数据从父路由传递到嵌套路由，因为数据尚未在 index.js 查看。

<Route path="events" element={<Events />}>
  <Route path=":event" element={<Event campaign={campaign} />} />
</Route>

Answer 1

如果你不能通过 props 传递某些东西，并且它不能通过路由参数派生，你可以使用上下文。

在您的示例中，<Event /> 将呈现在您放置 <Outlet /> 的位置。您可以在 <Events /> 组件中围绕您对 <Outlet /> 的使用包装上下文提供程序：

const MyContext = React.createContext();
const Events = () => {
  return <MyContext.Provider value={{greeting: "Hello, world!"}}>
    <Outlet />
  </MyContext.Provider>;
};

然后您可以使用相同的上下文在事件组件中访问此值：

const Event = () => {
  const { greeting } = React.useContext(MyContext);
  return <span>{greeting}</span>;
};

为了使代码更易于理解，在可能的情况下，我建议按以下优先顺序传播信息：

通过 props 到子组件（通过传递数据本身，或可用于从数据存储中检索数据的某些数据 ID）
让子组件确定来自 URL
通过上下文将数据从父级传递给子级

这也是为了明确 - 尽可能明确。

对于您的精确示例，我建议结合使用上下文和 ID；每个广告系列可能都有自己的 ID，所以我会设计一个 API，如下所示：

const Events = () => {
  const campaignStore = useCampaignStore();
  return <CampaignContext.Provider value={campaignStore}>
    <React.Suspense fallback={<span>Loading...</span>}>
      <Outlet />
    </React.Suspense>
  <CampaignContext.Provider>
}

const Event = ({ campaignID }) => {
  const campaign = useCampaign(campaignID);
  ....
}

其中 useCampaign 是一些挂钩，如果值尚不可用，它会抛出以启用悬念。

在 React 中在路由和嵌套路由之间传递数据

Passing Data Between Route and Nested Route in React

reactjs

react-hooks

react-router

react-router-dom