Question 203518 in Reactjs Question posted in
The new location for the React Documentation can be found here.

Reactjs – Getting Multiple Errors While using Routing in React

Error:

react.development.js:209  Warning: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app
See https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem.
printWarning @ react.development.js:209
error @ react.development.js:183
resolveDispatcher @ react.development.js:1592
useRef @ react.development.js:1629
BrowserRouter @ index.tsx:339
renderWithHooks @ react-dom.development.js:16305
mountIndeterminateComponent @ react-dom.development.js:20074
beginWork @ react-dom.development.js:21587
beginWork$1 @ react-dom.development.js:27426
performUnitOfWork @ react-dom.development.js:26557
workLoopSync @ react-dom.development.js:26466
renderRootSync @ react-dom.development.js:26434
performConcurrentWorkOnRoot @ react-dom.development.js:25738
workLoop @ scheduler.development.js:266
flushWork @ scheduler.development.js:239
performWorkUntilDeadline @ scheduler.development.js:533

react.development.js:1630  Uncaught TypeError: Cannot read properties of null (reading 'useRef')
    at Object.useRef (react.development.js:1630:1)
    at BrowserRouter (index.tsx:339:1)
    at renderWithHooks (react-dom.development.js:16305:1)
    at mountIndeterminateComponent (react-dom.development.js:20074:1)
    at beginWork (react-dom.development.js:21587:1)
    at HTMLUnknownElement.callCallback (react-dom.development.js:4164:1)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:4213:1)
    at invokeGuardedCallback (react-dom.development.js:4277:1)
    at beginWork$1 (react-dom.development.js:27451:1)
    at performUnitOfWork (react-dom.development.js:26557:1)

Index.js:

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

reportWebVitals();

App.js:

import React from 'react';
import './App.css';
import { BrowserRouter as Router, Route } from 'react-router-dom';
import LandingPage from './components/LandingPage';


const App = () => {
  return (
    <Router>
      <Route exact path="/" component={LandingPage} />
      {/* Other routes */}
    </Router>
  );
};


export default App;

LandingPage.js:

import React from 'react';

const LandingPage = () => {
  return (
    <>
    <div>
      <h1>Welcome to the Landing Page</h1>
      <p>This is a sample landing page built with React JSX.</p>
      <button>Get Started</button>
    </div>
    </>
  );
};

export default LandingPage;

I have installed all the necessary packages and dependencies but still it shows the same error. Moreover, I haven’t the useRef module anywhere in my code, I dont know why is it showing this error.I am new to routing stuff, earlier I used to define the modules within the app.js and it worked fine but this is causing problems

Tags:

2

Answers


  1. 0

    You should use Switch component.Maybe you can change App js like that:

    import React from 'react';
import './App.css';
import { BrowserRouter as Router, Switch, Route } from 'react-router-dom';
import LandingPage from './components/LandingPage';


const App = () => {
  return (
   <Router>
    <Switch>
      <Route exact path="/" component={LandingPage} />
      {/* Other routes */}
    </Switch>
   <Router>
  );
};


export default App;
    Login or Signup to reply.
  2. 0

    The error is showing because you forgot to use Routes component in your App.js file inside Router Component.

    It should be like this:
    App.js

    
    import "./App.css";
    import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
    import LandingPage from "./LandingPage";
    import Home from "./Home";

    function App() {
      return (
        <Router>
          <Routes> {/*Add this*/}
            <Route path="/" element={<Home />} />
            <Route path="/landing" element={<LandingPage />} />
          </Routes>
        </Router>
      );
    }

    export default App;
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search