时间戳

首页 > 解决方案 > 如何在反应路由中使用上下文提供者（反应 17）

reactjs - 如何在反应路由中使用上下文提供者（反应 17）

问题描述

我也被困在react router 中使用上下文提供程序。你如何在反应路由中为不同的组件使用不同的 contextprovider ..

标签： reactjsreact-routerreact-hooksfrontendreact-context

解决方案

您可以将此代码用于应用程序中所需的每个上下文。

  1. 您需要在 app.js 或 index.js （包装器组件）中导入 DataProvider

  2. 导入 useData() 以访问数据

    导出 const DataContext = React.createContext({});

    export const DataProvider = (props) => { const [data, setData] = React.useState({});

    返回 ( <DataContext.Provider value={data} > {props.children} </DataContext.Provider> ); };

    导出 const useData = () => React.useContext(DataContext);

推荐阅读