DiegoAlves
May 9, 2024
229 views
0 votes
2 Answers

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>
  )
}

The app as created with create-react-app

Complete error

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

Answers

Issue

The App component is recursively rendering itself.

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

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

export default App;

Don’t do this since there is no base case to end the recursion, App never gets a complete JSX value to render returned to it. You have effectively created a form of infinite render-looping.

Solution

Remove the root "/" route rendering App, or render anything else other than App.

Examples:

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;

- OdhiamboDormnic
- May 9, 2024 at 5:34 pm
- 0 votes
0
It seems like there’s an issue with how you’re implementing routing in your React application. The error message "dispatcher is null" suggests that there might be a problem with the way you’re setting up your router.

The code you’ve provided seems to be attempting to use createBrowserRouter from react-router-dom, but it’s not being used in the correct way. Here’s how you can fix it:
1. Import BrowserRouter: First, import BrowserRouter from react-router-dom instead of createBrowserRouter.
2. Wrap Your App Component with BrowserRouter: Wrap your App component inside BrowserRouter in your index.js file, which is typically the entry point of your React application.
Here’s how you can update your code:
```
// index.js

import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter } from 'react-router-dom';
import App from './App';

ReactDOM.render(
  <BrowserRouter>
    <App />
  </BrowserRouter>,
  document.getElementById('root')
);
```
And in your App.js, you don’t need to create a router manually. You can just return the components you want to render:
```
// App.js

import React from 'react';
import Header from './components/Header';
import FormularioLogin from './components/FormularioLogin';
import Menu from './pages/Menu';
import { Route, Switch } from 'react-router-dom';

function App() {
  return (
    <div>
      <Header />
      <Switch>
        <Route path="/menu" component={Menu} />
        <Route path="/" component={FormularioLogin} />
      </Switch>
    </div>
  );
}

export default App;
```
Make sure you have the correct imports for BrowserRouter, Route, and Switch from 'react-router-dom'.

This setup should resolve the "dispatcher is null" error and correctly implement routing in your React application.
Login or Signup to reply.

Please signup or login to give your own answer.

Click here to cancel reply.

Javascript – Cannot implement routing in react "dispatcher is null"

Answers

Issue

Solution