使用React Router 6和useContext hook，我找不到将数据传递给所有子元素的方法.当我用上下文包装<Routes></Routes>时.并使用上下文调用它.消费者在我的组件中出现错误:

The error: Cannot find name 'ShopContext'.

1、应用程序.带有路由和上下文的tsx.供应商

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;

以及子组件:

import React, { useContext } from 'react';

function Artists(){

    const shop = useContext(ShopContext)

    return <>
        Artists
    </>
}

export default Artists;

我试过:

1. 包装包含SharedLayout的第一条路由==&gt；不行，路由必须是<Routes>个子元素的直达路由

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>
   

   )