Fix - Cannot read property 'pathname' of undefined in React

avatar

Borislav Hadzhiev

Sat Apr 30 20222 min read

banner

Photo by Tom Blackout

Fix - Cannot read property 'pathname' of undefined in React #

The error "Cannot read property 'pathname' of undefined" occurs when we don't set the to prop on a Link component in React router. To solve the error, set the to prop on the Link to the specific path, e.g. <Link to="/">Home</Link>.

cannot read property pathname of undefined

Here is a minimal example of using the Link component in React router.

App.js
import React from 'react'; // 👇️ import Routes instead of Switch 👇️ import {Route, Link, Routes} from 'react-router-dom'; export default function App() { return ( <div> <div> <nav> <ul> <li> <Link to="/">Home</Link> </li> <li> <Link to="/about">About</Link> </li> </ul> </nav> <Routes> <Route path="/about" element={<About />} /> <Route path="/" element={<Home />} /> </Routes> </div> </div> ); } function Home() { return <h2>Home</h2>; } function About() { return <h2>About</h2>; }

If you are getting the error when testing pages that use React router, make sure to set the location prop on the Router component instead of history.

App.test.js
import {render} from '@testing-library/react'; import App from './App'; import {Router} from 'react-router-dom'; import {createMemoryHistory} from 'history'; test('renders react component', async () => { const history = createMemoryHistory(); render( <Router location={history.location} navigator={history}> <App />, </Router>, ); // 👇️ your tests... expect(screen.getByText(/you are home/i)).toBeInTheDocument(); });

If you are trying to access the pathname, use the useLocation hook.

App.js
import React from 'react'; import {Route, Link, Routes, useLocation} from 'react-router-dom'; export default function App() { // 👇️ with React router const location = useLocation(); console.log('hash', location.hash); console.log('pathname', location.pathname); console.log('search', location.search); return ( <div> <div> <nav> <ul> <li> <Link to="/">Home</Link> </li> <li> <Link to="/about">About</Link> </li> </ul> </nav> <Routes> <Route path="/about" element={<About />} /> <Route path="/" element={<Home />} /> </Routes> </div> </div> ); } function Home() { return <h2>Home</h2>; } function About() { return <h2>About</h2>; }

Make sure to wrap your application in a Router component in your index.js file.

index.js
import {createRoot} from 'react-dom/client'; import App from './App'; import {BrowserRouter as Router} from 'react-router-dom'; const rootElement = document.getElementById('root'); const root = createRoot(rootElement); // 👇️ wrap App in Router root.render( <Router> <App /> </Router> );
The best place to wrap your React app with a Router component is in your index.js file because that's the entry point of your React application.

Once your entire app is wrapped with a Router component, you can use any of the hooks from the React router package anywhere in your components.

Use the search field on my Home Page to filter through my more than 1,000 articles.