React中main.jsx引入Navbar组件报错，求全局导航栏解决方案

报错Uncaught TypeError: React2.useContext(...) is null是因为你在Navbar里使用了react-router-dom的Link组件，而Link必须处于RouterProvider提供的路由上下文范围内才能正常工作。现在你把Navbar放在了RouterProvider外面，导致Link无法获取到路由上下文，因此触发了这个错误。

要实现导航栏在所有页面显示，最规范的做法是创建布局组件，结合Outlet统一渲染导航栏和子页面内容，具体步骤如下：

1. 创建布局组件（示例命名为Layout.jsx） #

import React from 'react';
import { Outlet } from 'react-router-dom';
import Navbar from './Navbar';

const Layout = () => {
  return (
    <div>
      {/* 导航栏将在所有子页面顶部显示 */}
      <Navbar />
      {/* Outlet 负责渲染当前匹配的子路由组件 */}
      <Outlet />
    </div>
  );
};

export default Layout;

2. 修改路由配置 #

将Layout设为根路由的element，把所有页面路由作为它的子路由：

import { createBrowserRouter } from 'react-router-dom';
import Layout from './Layout';
import Home from './Home'; // 你的首页组件
import Dashboard from './Dashboard'; // 你的仪表盘组件
import Contact from './Contact'; // 你的联系页组件

const router = createBrowserRouter([
  {
    path: '/',
    element: <Layout />,
    children: [
      { path: '/', element: <Home /> },
      { path: '/dashboard', element: <Dashboard /> },
      { path: '/contact', element: <Contact /> },
    ],
  },
]);

3. 简化main.jsx #

现在只需渲染RouterProvider即可，Navbar会通过布局组件自动在所有页面展示：

ReactDOM.createRoot(document.getElementById('root')).render(
  <React.StrictMode>
    <RouterProvider router={router} />
  </React.StrictMode>,
);

快速临时调整（不推荐长期使用） #

如果不想修改路由结构，也可以直接将Navbar移入RouterProvider内部，让它处于路由上下文范围内：

ReactDOM.createRoot(document.getElementById('root')).render(
  <React.StrictMode>
    <RouterProvider router={router}>
      <Navbar />
    </RouterProvider>
  </React.StrictMode>,
);

但这种方式灵活性较差，页面结构复杂后难以维护，更推荐使用布局组件的方案。

内容的提问来源于stack exchange，提问作者Hey