TypeError: Cannot read properties of undefined (reading 'pathname')

user_17678518 0
Viewed 3654

enter image description hereTypeError: Cannot read properties of undefined (reading 'pathname')

What is the problem? My code

import {BrowserRouter as Routes, Route, Router} from "react-router-dom";

const App = () => {
return (
      <div className={stl.container}>
          <Header/>
          <Nav/>

          <Router>
              <Routes>
                  <Route path='/messages'  element={<Messages/>}/>
                  <Route path='/profile' element={<ProfileContent/>}/>
              </Routes>
          </Router>

      </div>

 );
}

enter image description here

react-router-dom react-router
5 Answers

Fix the imports. You're importing BrowserRouter as Routes.

import { BrowserRouter as Router, Routes, Route } from "react-router-dom";

Move the Nav component into the Router so it has a routing context provided to it. Any Link components rendered need the routing context.

const App = () => {
  return (
    <div className={stl.container}>
      <Router>
        <Header/>
        <Nav/>
        <Routes>
          <Route path='/messages'  element={<Messages/>} />
          <Route path='/profile' element={<ProfileContent/>} />
        </Routes>
      </Router>
    </div>
  );
}

If the code still isn't working then check your installed version of react-router-dom from your project's directory run:

npm list react-router-dom

If it is any v6.x version then you should be good. If there's still issue though then I suggest uninstalling and reinstalling react-router-dom.

npm un -s react-router-dom
npm i -s react-router-dom

then run the list command above to validate/verify the installed version.

user_86908570

Maybe something is wrong with your environment. I had the same issue, reinstalling packages really helped me.

user_100761460

The issue is due to you cannot pass an 'undefined' or 'null' value to the attribute, like in my case, I could have added a null-check, but I chose to add a "/" before it, as shown

enter image description here

user_144877220

Remove "/" from the beginning of the path attribute in Route component. Ex: <Route path='messages' element={}/>. Also give the same value to the "to" attribute in Link Component Ex: Messages

user_170734790

Must Use Attribute (to="#") with Link and see that this will run

user_199570040
Related