错误 "Cannot find name CONTEXT" React Router 6 和 useContext

Question

我找不到使用 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>

)

Answer 1

问题

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
    </>
  );
}

错误 "Cannot find name CONTEXT" React Router 6 和 useContext

Error "Cannot find name CONTEXT" React Router 6 and useContext

reactjs

react-hooks

react-router-dom

react-context

use-context

问题

解决方案