TypeError：无法解构“React2.useContext（...）”的属性“basename”，因为它为空

Question

自从我使用 React Router 和第一次使用 v6 以来已经有一段时间了（据我记得）。我的应用程序正在使用：

• 维特
• 反应
• 材质-UI

我已尝试以下操作：

• 在网上搜索过
• 多次重读文档
• 遵循reactrouter教程并将其应用到我的应用程序中

我一直在对应用程序采取一步一步的方法，在进行下一个更改之前我会测试每个更改。看来我的路由是正确的，因为我通过输入路由作为 URL 进行了测试。但是，当我尝试添加链接时，我收到了上下文错误。我知道我错过了一些简单的东西，但我只是没有看到它。任何帮助将不胜感激。这是代码（为简洁起见省略了导入）：

index.jsx：

ReactDOM.createRoot(document.getElementById('root')).render(
  <React.StrictMode>

<ThemeProvider theme={theme}>
      {/* CssBaseline kickstart an elegant, consistent, and simple baseline to build upon. */}
      <CssBaseline />
      <App />
    </ThemeProvider>

  </React.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>

我尝试通过尝试环绕各种组件来创建上下文，但收到有关我的应用程序中有 2 个路由器的错误消息。

Answer 1

这里的问题是

HeaderBar

被渲染在路由器的外部，例如任何路由上下文。将其移至路由器中。

示例：

const AppLayout = () => (
  <>
    <HeaderBar />
    <Outlet />
  </>
);

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

]);

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

  return <RouterProvider router={router}>;
}

export default App