在 React 中在路由和嵌套路由之间传递数据
Passing Data Between Route and Nested Route in React
使用 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>
如果你不能通过 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
是一些挂钩,如果值尚不可用,它会抛出以启用悬念。