Login page won't render in React v18

August 24, 2022

I’m having a problem with my routes in React v.18. I cannot get a login page to render.

Index.js

const rootElement = document.getElementById('root');
const root = createRoot(rootElement);

root.render(
<React.StrictMode>
  <Router>
    <App/>
  </Router>
</React.StrictMode>
);

App.js

export const App = () => (
    <>
        <Routes>
            <Route path="/login" element={<Login />} />
            <Route path="/register" element={<Register />} />         
        </Routes>
    </>
)
 
export default App;

I get this error message in the console: Uncaught TypeError: Cannot read properties of undefined (reading ‘pathname’). And it says the error is coming from the component. But I don’t have access to change anything in the <Router> component.

What am I doing wrong?

>Solution :

First, make sure that all ‘react-router-dom’ related are imported properly.

ex.

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

then try doing this to yout index.js:

root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

then to your App.js:

 <Router>
        <Routes>
            <Route path="/login" element={<Login />} />
            <Route path="/register" element={<Register />} />         
        </Routes>
    </Router>

Hope that helps