CODEWITHSUNDEEP
reactjsreact-hooksreact-routerreact-router-dom
piyush_raj
piyush_raj

Reputation: 25

why react router dom throwing hooks Invalid hook call error?

React router throwing this warning. even did what documentation says.

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

in app.js i did this

     import { BrowserRouter, Route, Routes } from "react-router-dom";
      function App() {
          return (
          <BrowserRouter>
          <Routes>
           <Route path="/" element={<div>Home page</div>} />
           <Route path="/about" element={<div>aBout page</div>} />
          </Routes>
         </BrowserRouter>
          );
           }

         export default App;

this is what error it throws

Upvotes: 1

Views: 1022

Answers (1)

Ensar
Ensar

Reputation: 143

Maybe its about you are calling a div element instead of a React component.

Try converting to this:

 <BrowserRouter>
      <Routes>
       <Route index element={<HomePage />}> 
         //index means it is the first page you are gonna encounter.
         <Route path="/about" element={<AboutPage />} />
       </Route>
      </Routes>
 </BrowserRouter>

And make sure you've created HomePage and AboutPage components and imported them.

Upvotes: 1

Related Questions