Javascript TypeError：无法分解'；React2.useContext(...)'；的属性'；basename'；，因为它为空

我已经有一段时间没有使用反作用-Router了，也是第一次使用v6.我的应用程序正在使用:

• Vite
• 反作用
• material -用户界面

我try 了以下几种方法:

• 在网上搜索了一下
• 将文档重读多次
• 遵循react-router教程，并将其应用到我的应用程序中

我对应用程序采取了一步一步的方法，在进行下一个更改之前，我会对每个更改进行测试.当我通过输入路径作为URL进行测试时，似乎我的路由是正确的.然而，当我try 添加Link时，我得到了脱离上下文的错误.我知道我错过了一些简单的东西，但我只是没有看到它.以下是为简洁起见省略了导入的代码.

Index.jsx

反作用DOM.createRoot(document.getElementById('root')).render(
  <反作用.StrictMode>
    <ThemeProvider theme={theme}>
      {/* CssBaseline kickstart an elegant, consistent, and simple baseline to build upon. */}
      <CssBaseline />
      <App />
    </ThemeProvider>
  </反作用.StrictMode>
)

App.jsx

const router = createBrowserRouter([
  {
    path: "/",
    element: "",
    errorElement: <ErrorPage />,
    children: [
      {
        path: "/about",
        element: <About />,
      },
      {
        path: "/products",
        element: <Products />,
      },
      {
        path: "/",
        element: <Home />,
      },
    ]
  },

]);

function App() {
  const [count, setCount] = useState(0)

  return (  
    <><HeaderBar />
    <RouterProvider router={router}>
      <div>
        <Outlet />
        </div>
      </div>
    </RouterProvider></>
  )
}

export default App

HeaderBar.jsx(为简洁起见，仅显示失败元素)

<Button
  key={page.text}
  onClick={handleCloseNavMenu}
  sx={{ my: 2, color: 'white', display: 'block' }}
  component={Link}
  to={page.target}
>
  {page.text}
</Button>

我试图通过try 在各种组件周围包装<BrowserRouter>来创建上下文，但收到关于应用程序中有2个路由的错误消息.