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

Question

TypeError: 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>

 );
}

Answer 1

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.

Answer 2

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