错误 "Cannot find name CONTEXT" React Router 6 和 useContext
Error "Cannot find name CONTEXT" React Router 6 and useContext
我找不到使用 React Router 6 和 useContext 挂钩将我的数据传递给所有 children 的方法。当我用我的 Context.Provider 包装 <Routes></Routes>
并在我的组件中用 Context.Consumer 调用它时,出现错误:
错误:找不到名称 'ShopContext'。
1.The App.tsx 与路线和 Context.Provider
import React, { useState, createContext } from 'react';
import './App.scss';
import { BrowserRouter, Routes, Route } from 'react-router-dom';
import Home from '../../pages/Home';
import SharedLayout from '../../layouts/SharedLayout';
import Artists from '../../pages/Artists';
import Contact from '../../pages/Contact';
import NotFound from '../../pages/NotFound';
import { Shop } from '../../interfaces/Shop';
import Data from '../../data.json';
function App() {
const [Infos] = useState<Shop>(Data)
const ShopContext = createContext({})
return (
<BrowserRouter>
<ShopContext.Provider value={Infos}>
<Routes>
<Route path='/' element={<SharedLayout />}>
<Route index element={<Home />} />
<Route path='artists' element={<Artists />}/>
<Route path='contact' element={<Contact />}/>
<Route path='*' element={<NotFound />} />
</Route>
</Routes>
</ShopContext.Provider>
</BrowserRouter>
)}
export default App;
和 children 组件:
import React, { useContext } from 'react';
function Artists(){
const shop = useContext(ShopContext)
return <>
Artists
</>
}
export default Artists;
我试过了:
包装包含 SharedLayout 的第一条路线 ==> 不起作用,路线必须是 <Routes>
的直接 children
像这样在每个路由中包装每个组件:
<BrowserRouter>
<Routes>
<Route path='/' element={
<ShopContext.Provider value={Infos}>
<SharedLayout />
</ShopContext.Provider>
}>
<Route index element={
<ShopContext.Provider value={Infos}>
<Home />
</ShopContext.Provider>
} />
<Route path='artists' element={
<ShopContext.Provider value={Infos}>
<Artists />
</ShopContext.Provider>
}/>
<Route path='contact' element={
<ShopContext.Provider value={Infos}>
<Contact />
</ShopContext.Provider>
}/>
<Route path='*' element={<NotFound />} />
</Route>
</Routes>
</BrowserRouter>
)
问题
ShopContext
React 上下文应该在 任何 React 组件之外声明。通过在 App
中声明它,您每次 App
渲染时都会创建一个新的上下文。因为 ShopContext
是在 App
内声明的,所以它没有定义为与尝试使用上下文值的路由组件中的 useContext
挂钩一起使用。
解决方案
将 ShopContext
移动到它自己的文件中,以便可以创建它并 exported/imported 供使用。
示例:
ShopContext
import React, { useContext, useState, createContext } from 'react';
const ShopContext = createContext({});
const ShopProvider = ({ children }) => {
const [infos, setInfos] = useState<Shop>(Data);
... business logic to set/update infos state, etc ...
return (
<ShopContext.Provider value={infos}>
{children}
</ShopContext.Provider>
);
};
export useShopContext = () => useContext(ShopContext);
export default ShopProvider;
应用程序
import ShopProvider from '../path/to/ShopProvider';
function App() {
return (
<BrowserRouter>
<ShopProvider>
<Routes>
<Route path='/' element={<SharedLayout />}>
<Route index element={<Home />} />
<Route path='artists' element={<Artists />}/>
<Route path='contact' element={<Contact />}/>
<Route path='*' element={<NotFound />} />
</Route>
</Routes>
</ShopProvider>
</BrowserRouter>
);
}
艺术家
import { useShopContext } from '../path/to/ShopProvider';
function Artists(){
const shop = useShopContext();
return (
<>
Artists
</>
);
}
我找不到使用 React Router 6 和 useContext 挂钩将我的数据传递给所有 children 的方法。当我用我的 Context.Provider 包装 <Routes></Routes>
并在我的组件中用 Context.Consumer 调用它时,出现错误:
错误:找不到名称 'ShopContext'。
1.The App.tsx 与路线和 Context.Provider
import React, { useState, createContext } from 'react';
import './App.scss';
import { BrowserRouter, Routes, Route } from 'react-router-dom';
import Home from '../../pages/Home';
import SharedLayout from '../../layouts/SharedLayout';
import Artists from '../../pages/Artists';
import Contact from '../../pages/Contact';
import NotFound from '../../pages/NotFound';
import { Shop } from '../../interfaces/Shop';
import Data from '../../data.json';
function App() {
const [Infos] = useState<Shop>(Data)
const ShopContext = createContext({})
return (
<BrowserRouter>
<ShopContext.Provider value={Infos}>
<Routes>
<Route path='/' element={<SharedLayout />}>
<Route index element={<Home />} />
<Route path='artists' element={<Artists />}/>
<Route path='contact' element={<Contact />}/>
<Route path='*' element={<NotFound />} />
</Route>
</Routes>
</ShopContext.Provider>
</BrowserRouter>
)}
export default App;
和 children 组件:
import React, { useContext } from 'react';
function Artists(){
const shop = useContext(ShopContext)
return <>
Artists
</>
}
export default Artists;
我试过了:
包装包含 SharedLayout 的第一条路线 ==> 不起作用,路线必须是
的直接 children<Routes>
像这样在每个路由中包装每个组件:
<BrowserRouter> <Routes> <Route path='/' element={ <ShopContext.Provider value={Infos}> <SharedLayout /> </ShopContext.Provider> }> <Route index element={ <ShopContext.Provider value={Infos}> <Home /> </ShopContext.Provider> } /> <Route path='artists' element={ <ShopContext.Provider value={Infos}> <Artists /> </ShopContext.Provider> }/> <Route path='contact' element={ <ShopContext.Provider value={Infos}> <Contact /> </ShopContext.Provider> }/> <Route path='*' element={<NotFound />} /> </Route> </Routes> </BrowserRouter>
)
问题
ShopContext
React 上下文应该在 任何 React 组件之外声明。通过在 App
中声明它,您每次 App
渲染时都会创建一个新的上下文。因为 ShopContext
是在 App
内声明的,所以它没有定义为与尝试使用上下文值的路由组件中的 useContext
挂钩一起使用。
解决方案
将 ShopContext
移动到它自己的文件中,以便可以创建它并 exported/imported 供使用。
示例:
ShopContext
import React, { useContext, useState, createContext } from 'react';
const ShopContext = createContext({});
const ShopProvider = ({ children }) => {
const [infos, setInfos] = useState<Shop>(Data);
... business logic to set/update infos state, etc ...
return (
<ShopContext.Provider value={infos}>
{children}
</ShopContext.Provider>
);
};
export useShopContext = () => useContext(ShopContext);
export default ShopProvider;
应用程序
import ShopProvider from '../path/to/ShopProvider';
function App() {
return (
<BrowserRouter>
<ShopProvider>
<Routes>
<Route path='/' element={<SharedLayout />}>
<Route index element={<Home />} />
<Route path='artists' element={<Artists />}/>
<Route path='contact' element={<Contact />}/>
<Route path='*' element={<NotFound />} />
</Route>
</Routes>
</ShopProvider>
</BrowserRouter>
);
}
艺术家
import { useShopContext } from '../path/to/ShopProvider';
function Artists(){
const shop = useShopContext();
return (
<>
Artists
</>
);
}