Cannot read properties of undefined (reading 'pathname')

avatar
Borislav Hadzhiev

Last updated: Jan 18, 2023
2 min

banner

# Cannot read properties of undefined (reading 'pathname')

The error "Cannot read properties of undefined (reading 'pathname')" 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.

I wrote a book in which I share everything I know about how to become a better, more efficient programmer.
book cover
You can use the search field on my Home Page to filter through all of my articles.

Copyright ยฉ 2024 Borislav Hadzhiev