React路由配置报错：dispatcher is null 问题求助

问题根源 #

你的代码存在两个关键问题：

• 路由配置中，Component 属性需要传入组件函数，而非JSX元素（如 <Menu />）。
• 将 App 组件作为路由项会导致无限递归渲染：App组件渲染RouterProvider，RouterProvider又会尝试渲染App组件，最终引发React内部状态异常，出现"dispatcher is null"错误。

修正后的代码 #

App.js

import './App.css';
import Header from './componentes/Header';
import FormularioLogin from './componentes/FormularioLogin';
import { createBrowserRouter, RouterProvider } from 'react-router-dom';
import Menu from './pages/Menu';

// 定义根路径的组件（示例使用FormularioLogin，可根据需求替换）
function Home() {
  return (
    <div>
      <Header />
      <FormularioLogin />
    </div>
  );
}

const router = createBrowserRouter([
  { path: '/menu', Component: Menu }, // 传入组件函数而非JSX
  { path: '/', Component: Home }, // 使用独立的Home组件代替App
]);

function App() {
  return <RouterProvider router={router} />;
}

export default App;

Menu.js（无需修改）

export default function Menu() {
  return (
    <div>teste</div>
  );
}

错误原因详解 #

当你在路由中使用 <App /> 作为组件时，会触发以下循环：

1. React渲染App组件 → 2. App渲染RouterProvider → 3. RouterProvider根据路由配置渲染App组件 → 回到步骤1。
   这种无限递归会导致React的内部调度器（dispatcher）无法正常工作，从而抛出"dispatcher is null"错误。同时，路由的Component属性要求传入组件的引用，而非已实例化的JSX元素，否则React无法正确管理组件的生命周期和状态。

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