错误 "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;

我试过了:

  1. 包装包含 SharedLayout 的第一条路线 ==> 不起作用,路线必须是 <Routes>

    的直接 children
  2. 像这样在每个路由中包装每个组件:

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