React Router: Cannot read property 'pathname' of undefined

Question

I've just started learning React and got stuck at this error.

Uncaught TypeError: Cannot read property 'pathname' of undefined at new Router

Here is my code:

var React = require('react');
var ReactDOM = require('react-dom');
var { Route, Router, IndexRoute } = require('react-router');
var hashHistory = require('react-router-redux')

var Main = require('./components/Main');

ReactDOM.render(
    <Router history={hashHistory}>
        <Route path="/" component={Main}>

        </Route>
    </Router>,
  document.getElementById('app')
);

The tutorial I was following uses React-Router 2.0.0, but on my desktop I'm using 4.1.1. I tried searching for changes but was unsuccessful in finding a solution that worked.

"dependencies": {
"express": "^4.15.2",
"react": "^15.5.4",
"react-dom": "^15.5.4",
"react-router": "^4.1.1",
"react-router-dom": "^4.1.1",
"react-router-redux": "^4.0.8"

You want to use the BrowserRouter component not Router. – Jordan Nov 30 '21 at 03:13 — Jordan, Nov 30 '21 at 03:13

score 117 · Answer 1 · edited Apr 27 '23 at 20:12

I got the above error message and it was extremely cryptic. I tried the other solutions mentioned and it didn't work.

Turns out I accidentally forgot to include the to prop in one of the <Link /> components.

Even if the <Link /> does not require a to prop, you simply just add and write it with empty quotes -> e.g. <Link to="" />. That will do the trick!

Wish the error message was clearer. A simple required prop "to" not found or something similar would have been helpful. Hopefully, this saves someone else who has encountered the same problem some time.

Arnold Gandarillas · Accepted Answer · 2018-02-22T14:54:28.863

38

The error is because the api in React Router v4 is totally different. You can try this:

import React from 'react';
import ReactDOM from 'react-dom';
import {
  BrowserRouter as Router,
  Route
} from 'react-router-dom';

const Main = () => <h1>Hello world</h1>;

ReactDOM.render(
  <Router>
    <Route path='/' component={Main} />
  </Router>,
  document.getElementById('app')
);

You can review the documentation to learn how it works now.

Here I have a repo with routing animation.

And here you can find a live demo.

edited Feb 22 '18 at 14:54

answered Apr 25 '17 at 21:01

Arnold Gandarillas

3,896
1
30
36

Using BrowserRouter instead of Router - this change alone solved my issue of " Uncaught TypeError: Cannot read properties of undefined (reading 'pathname') at Router.render". My versions of related npm packages: "react-router": "^5.1.2", "react-router-dom": "^5.1.2", "react-router-redux": "^4.0.8", – Stevey Aug 24 '22 at 14:49

score 9 · Answer 3 · edited Nov 25 '21 at 19:57

9

Just make sure that you've added to props to <Link> otherwise you would also get the same error.

after adding it should look something like this:-

<Link to="#">

edited Nov 25 '21 at 19:57

Dhruv

30
5

answered Sep 27 '18 at 20:19

mcnk

1,690
3
20
29

score 9 · Answer 4 · edited Oct 19 '22 at 07:49

9

It turns out that the order of import matter and Router should come first

Incorrect

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

Correct

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

edited Oct 19 '22 at 07:49

Mahesh Samudra

1,039
1
11
25

answered Oct 07 '22 at 21:08

michael

111
1
3

2

It's not the order. In the first one, you are using `BrowserRouter` as `Route` and importing `Router` from `react-router-dom` which is incorrect. You should import `Route` from `react-router-dom` and `BrowserRouter` as `Router`. – Mahesh Samudra Oct 12 '22 at 17:22

score 7 · Answer 5 · answered May 25 '22 at 17:40

7

Just use BrowserRouter as Router, instead of Router

answered May 25 '22 at 17:40

Developer Virtual_reality

71
1
1

score 6 · Answer 6 · answered Jul 19 '17 at 09:04

6

I had the same error and I resolved it by updating history from 2.x.x to 4.x.x

npm install history@latest --save

answered Jul 19 '17 at 09:04

Made in Moon

2,294
17
21

score 6 · Answer 7 · answered Aug 03 '18 at 15:11

I had a different cause, but the same error and came across this question because of it. Putting this here in case the same happens for others and it may help. The issue for me was that I had updated to react-router-4 and accessing pathname has changed.

Change: (React-Router-3 & earlier)

this.props.location.pathname

To: (React-Router-4)

this.props.history.location.pathname

score 5 · Answer 8 · answered Nov 18 '21 at 03:32

5

The API in React Router v6 has changed from that of v5.

See the accepted answer in the following: "Cannot read properties of undefined (reading 'pathname')" when testing pages in the v6 React Router

answered Nov 18 '21 at 03:32

David

895
8
12

score 5 · Answer 9 · answered Nov 24 '21 at 18:54

5

Check all the Link or NavLink components in your application some of them might be missing the 'to' property which responsible to redirect the user to another path

answered Nov 24 '21 at 18:54

Yaser Ananbeh

134
1
2

score 5 · Answer 10 · answered May 22 '22 at 15:36

5

This error still happen if you pass undefined or null value to props to of <Link />.

answered May 22 '22 at 15:36

VMT

789
1
3
11

score 5 · Answer 11 · answered Jun 27 '22 at 18:10

5

Use BrowserRouter instead of Router as a wrapper, and don't forget to import BrowserRouter

<BrowserRouter>
    // Rest of the app.
</BrowserRouter>

This error also arises when u are using Link and forget to mention to="/" prop.

answered Jun 27 '22 at 18:10

Mridul Gupta

807
1
6
8

score 3 · Answer 12 · answered Dec 19 '21 at 11:52

3

You are giving an undefined value to the "to" props of Link element

import { Link } from "react-router-dom";

const path = undefined;

function Home() {
  return (
        <Link to={path}>Home</Link> 
  );
}

answered Dec 19 '21 at 11:52

KISHORE K J

186
2
4

score 1 · Answer 13 · answered Apr 11 '22 at 07:41

1

In react-router-dom 6+ I'm getting this error

Error:

   <Routes>
      <Route path="/about">
        <About />
      </Route>
      <Route path="/users">
        <Users />
      </Route>
      <Route path="/">
        <Home />
      </Route>
   </Routes>

Solution:

<Routes>
   <Route exact path="/" element={<Home />} />
   <Route exact path="/about" element={<About />} />
   <Route exact path="/user" element={<User />} />
</Routes>

answered Apr 11 '22 at 07:41

KARTHIKEYAN.A

18,210
6
124
133

2

writing exact is not necessary in react-router-dom v6 – Kunal Tyagi May 13 '22 at 09:42
1

Correction: is gone. Instead, routes with descendant routes (defined in other components) use a trailing * in their path to indicate they match deeply. https://reactrouter.com/docs/en/v6/upgrading/v5#relative-routes-and-links – Matt S Jul 20 '22 at 17:25

score 0 · Answer 14 · answered Oct 21 '21 at 09:10

had a similar error showing up when I was trying to use history.props('./somelink'). I kept getting the error that the pathname was undefined. Turns out that I was also was using a <Link></Link> in my JSX below. This was what was causing the error. Hope this helps for anyone making the same mistake

score 0 · Answer 15 · answered Feb 01 '22 at 17:22

0

For react-router v6 you should do this (use element and enclose all routes in `: https://stackoverflow.com/a/70250612/570612

answered Feb 01 '22 at 17:22

unify

6,161
4
33
34

score 0 · Answer 16 · edited Jul 23 '22 at 04:33

0

This might helps you in react-router-dom v6

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

edited Jul 23 '22 at 04:33

Suraj Rao

29,388
11
94
103

answered Jul 23 '22 at 03:56

Aman Jha

308
4
4

score 0 · Answer 17 · answered Apr 15 '23 at 12:49

in some cases you need to define the location props on the main Router like this

ReactDOM.render(
<Router location={history.location} history={hashHistory}>
    <Route path="/" component={Main}>

    </Route>
</Router>, document.getElementById('app'));

Edit: history has to be defined with createBrowserHistory() from 'history'

React Router: Cannot read property 'pathname' of undefined

17 Answers17

Linked

Related