无法在react“dispatcher is null”中实现路由

问题描述 投票：0回答：1

这是我的App.js

import logo from './logo.svg';
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';


const router = createBrowserRouter(
 [ {path: 'menu', Component: <Menu/> },
 {path: '/', Component: <App/> },
]
)

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

export default App;

这是我的 Menu.js

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

使用 create-react-app 创建的应用程序

完全错误

Uncaught runtime errors:
ERROR
dispatcher is null
useState@http://localhost:3000/static/js/bundle.js:35452:7
RouterProvider@http://localhost:3000/static/js/bundle.js:31433:66
renderWithHooks@http://localhost:3000/static/js/bundle.js:56085:31
mountIndeterminateComponent@http://localhost:3000/static/js/bundle.js:60056:17
beginWork@http://localhost:3000/static/js/bundle.js:61359:20
callCallback@http://localhost:3000/static/js/bundle.js:46341:18
invokeGuardedCallbackDev@http://localhost:3000/static/js/bundle.js:46385:20
invokeGuardedCallback@http://localhost:3000/static/js/bundle.js:46442:35
beginWork$1@http://localhost:3000/static/js/bundle.js:66340:32
performUnitOfWork@http://localhost:3000/static/js/bundle.js:65588:16
workLoopSync@http://localhost:3000/static/js/bundle.js:65511:26
renderRootSync@http://localhost:3000/static/js/bundle.js:65484:11
performConcurrentWorkOnRoot@http://localhost:3000/static/js/bundle.js:64879:78
workLoop@http://localhost:3000/static/js/bundle.js:72919:46
flushWork@http://localhost:3000/static/js/bundle.js:72897:18
performWorkUntilDeadline@http://localhost:3000/static/js/bundle.js:73134:25
ERROR
dispatcher is null
useState@http://localhost:3000/static/js/bundle.js:35452:7
RouterProvider@http://localhost:3000/static/js/bundle.js:31433:66
renderWithHooks@http://localhost:3000/static/js/bundle.js:56085:31
mountIndeterminateComponent@http://localhost:3000/static/js/bundle.js:60056:17
beginWork@http://localhost:3000/static/js/bundle.js:61359:20
callCallback@http://localhost:3000/static/js/bundle.js:46341:18
invokeGuardedCallbackDev@http://localhost:3000/static/js/bundle.js:46385:20
invokeGuardedCallback@http://localhost:3000/static/js/bundle.js:46442:35
beginWork$1@http://localhost:3000/static/js/bundle.js:66340:32
performUnitOfWork@http://localhost:3000/static/js/bundle.js:65588:16
workLoopSync@http://localhost:3000/static/js/bundle.js:65511:26
renderRootSync@http://localhost:3000/static/js/bundle.js:65484:11
performConcurrentWorkOnRoot@http://localhost:3000/static/js/bundle.js:64879:78
workLoop@http://localhost:3000/static/js/bundle.js:72919:46
flushWork@http://localhost:3000/static/js/bundle.js:72897:18
performWorkUntilDeadline@http://localhost:3000/static/js/bundle.js:73134:25
ERROR
dispatcher is null
useState@http://localhost:3000/static/js/bundle.js:35452:7
RouterProvider@http://localhost:3000/static/js/bundle.js:31433:66
renderWithHooks@http://localhost:3000/static/js/bundle.js:56085:31
mountIndeterminateComponent@http://localhost:3000/static/js/bundle.js:60056:17
beginWork@http://localhost:3000/static/js/bundle.js:61359:20
callCallback@http://localhost:3000/static/js/bundle.js:46341:18
invokeGuardedCallbackDev@http://localhost:3000/static/js/bundle.js:46385:20
invokeGuardedCallback@http://localhost:3000/static/js/bundle.js:46442:35
beginWork$1@http://localhost:3000/static/js/bundle.js:66340:32
performUnitOfWork@http://localhost:3000/static/js/bundle.js:65588:16
workLoopSync@http://localhost:3000/static/js/bundle.js:65511:26
renderRootSync@http://localhost:3000/static/js/bundle.js:65484:11
recoverFromConcurrentError@http://localhost:3000/static/js/bundle.js:64976:38
performConcurrentWorkOnRoot@http://localhost:3000/static/js/bundle.js:64889:26
workLoop@http://localhost:3000/static/js/bundle.js:72919:46
flushWork@http://localhost:3000/static/js/bundle.js:72897:18
performWorkUntilDeadline@http://localhost:3000/static/js/bundle.js:73134:25
ERROR
dispatcher is null
useState@http://localhost:3000/static/js/bundle.js:35452:7
RouterProvider@http://localhost:3000/static/js/bundle.js:31433:66
renderWithHooks@http://localhost:3000/static/js/bundle.js:56085:31
mountIndeterminateComponent@http://localhost:3000/static/js/bundle.js:60056:17
beginWork@http://localhost:3000/static/js/bundle.js:61359:20
callCallback@http://localhost:3000/static/js/bundle.js:46341:18
invokeGuardedCallbackDev@http://localhost:3000/static/js/bundle.js:46385:20
invokeGuardedCallback@http://localhost:3000/static/js/bundle.js:46442:35
beginWork$1@http://localhost:3000/static/js/bundle.js:66340:32
performUnitOfWork@http://localhost:3000/static/js/bundle.js:65588:16
workLoopSync@http://localhost:3000/static/js/bundle.js:65511:26
renderRootSync@http://localhost:3000/static/js/bundle.js:65484:11
performConcurrentWorkOnRoot@http://localhost:3000/static/js/bundle.js:64879:78
workLoop@http://localhost:3000/static/js/bundle.js:72919:46
flushWork@http://localhost:3000/static/js/bundle.js:72897:18
performWorkUntilDeadline@http://localhost:3000/static/js/bundle.js:73134:25
ERROR
dispatcher is null
useState@http://localhost:3000/static/js/bundle.js:35452:7
RouterProvider@http://localhost:3000/static/js/bundle.js:31433:66
renderWithHooks@http://localhost:3000/static/js/bundle.js:56085:31
mountIndeterminateComponent@http://localhost:3000/static/js/bundle.js:60056:17
beginWork@http://localhost:3000/static/js/bundle.js:61359:20
callCallback@http://localhost:3000/static/js/bundle.js:46341:18
invokeGuardedCallbackDev@http://localhost:3000/static/js/bundle.js:46385:20
invokeGuardedCallback@http://localhost:3000/static/js/bundle.js:46442:35
beginWork$1@http://localhost:3000/static/js/bundle.js:66340:32
performUnitOfWork@http://localhost:3000/static/js/bundle.js:65588:16
workLoopSync@http://localhost:3000/static/js/bundle.js:65511:26
renderRootSync@http://localhost:3000/static/js/bundle.js:65484:11
recoverFromConcurrentError@http://localhost:3000/static/js/bundle.js:64976:38
performConcurrentWorkOnRoot@http://localhost:3000/static/js/bundle.js:64889:26
workLoop@http://localhost:3000/static/js/bundle.js:72919:46
flushWork@http://localhost:3000/static/js/bundle.js:72897:18
performWorkUntilDeadline@http://localhost:3000/static/js/bundle.js:73134:25
ERROR
dispatcher is null
useState@http://localhost:3000/static/js/bundle.js:35452:7
RouterProvider@http://localhost:3000/static/js/bundle.js:31433:66
renderWithHooks@http://localhost:3000/static/js/bundle.js:56085:31
mountIndeterminateComponent@http://localhost:3000/static/js/bundle.js:60056:17
beginWork@http://localhost:3000/static/js/bundle.js:61359:20
beginWork$1@http://localhost:3000/static/js/bundle.js:66318:18
performUnitOfWork@http://localhost:3000/static/js/bundle.js:65588:16
workLoopSync@http://localhost:3000/static/js/bundle.js:65511:26
renderRootSync@http://localhost:3000/static/js/bundle.js:65484:11
recoverFromConcurrentError@http://localhost:3000/static/js/bundle.js:64976:38
performConcurrentWorkOnRoot@http://localhost:3000/static/js/bundle.js:64889:26
workLoop@http://localhost:3000/static/js/bundle.js:72919:46
flushWork@http://localhost:3000/static/js/bundle.js:72897:18
performWorkUntilDeadline@http://localhost:3000/static/js/bundle.js:73134:25
reactjs react-router-dom
1个回答
0
投票

问题

App
组件正在递归地渲染自身。

const router = createBrowserRouter([
  { path: 'menu', Component: <Menu /> },
  { path: '/', Component: <App /> }, // <-- rendered by App!
]);

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

export default App;

不要这样做，因为没有结束递归的基本情况，

App
永远不会获得完整的 JSX 值来渲染返回给它。您已经有效地创建了一种无限渲染循环的形式。

解决方案

删除根

"/"
路由渲染
App
，或渲染除App
之外的任何其他内容
。

示例：

const router = createBrowserRouter([
  { path: 'menu', Component: <Menu /> },
  // RRD will complain about no "/" route though
]);

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

export default App;

const router = createBrowserRouter([
  { path: 'menu', Component: <Menu /> },
  { path: '/', Component: <Home /> },
]);

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

export default App;
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.