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
– Jordan

2021-11-30 03:13:08 +00:00
Commented Nov 30, 2021 at 3:13 — Jordan
– Jordan, Commented Nov 30, 2021 at 3:13

CodeNKoffee · Accepted Answer · 2023-04-27 20:12:05Z

126

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.

edited Apr 27, 2023 at 20:12

CodeNKoffee

331 silver badge6 bronze badges

answered Apr 28, 2018 at 2:08

Brennan Cheung

4,5714 gold badges34 silver badges34 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

mneumann Over a year ago

This is not the first time React shows me cryptic error messages. Same when you don't pass an object to inline style attributes... There is no way to understand what's going on unless you already know. Thanks!

Arnold Gandarillas · Accepted Answer · 2018-02-22 14:54:28Z

44

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, 2018 at 14:54

answered Apr 25, 2017 at 21:01

Arnold Gandarillas

4,3801 gold badge35 silver badges37 bronze badges

1 Comment

Stevey Over a year ago

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",

Mahesh Samudra · Accepted Answer · 2022-10-19 07:49:34Z

18

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, 2022 at 7:49

Mahesh Samudra

1,2382 gold badges13 silver badges28 bronze badges

answered Oct 7, 2022 at 21:08

michael

2012 silver badges4 bronze badges

1 Comment

Mahesh Samudra Over a year ago

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.

Dhruva · Accepted Answer · 2021-11-25 19:57:06Z

13

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, 2021 at 19:57

Dhruva

406 bronze badges

answered Sep 27, 2018 at 20:19

mcnk

2,3613 gold badges26 silver badges41 bronze badges

Comments

Made in Moon · Accepted Answer · 2017-07-19 09:04:08Z

7

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, 2017 at 9:04

Made in Moon

2,48420 silver badges21 bronze badges

Comments

Developer Virtual_reality · Accepted Answer · 2022-05-25 17:40:03Z

7

Just use BrowserRouter as Router, instead of Router

answered May 25, 2022 at 17:40

Developer Virtual_reality

711 silver badge1 bronze badge

Comments

user13937286 · Accepted Answer · 2022-06-27 18:10:09Z

6

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, 2022 at 18:10

user13937286

Comments

Rbar · Accepted Answer · 2018-08-03 15:11:56Z

5

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

answered Aug 3, 2018 at 15:11

Rbar

3,9489 gold badges47 silver badges71 bronze badges

Comments

David · Accepted Answer · 2021-11-18 03:32:24Z

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, 2021 at 3:32

David

1,18113 silver badges15 bronze badges

Comments

Yaser Ananbeh · Accepted Answer · 2021-11-24 18:54:37Z

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, 2021 at 18:54

Yaser Ananbeh

1662 silver badges2 bronze badges

Comments

VMT · Accepted Answer · 2022-05-22 15:36:29Z

5

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

answered May 22, 2022 at 15:36

VMT

8091 gold badge5 silver badges11 bronze badges

Comments

KISHORE K J · Accepted Answer · 2021-12-19 11:52:38Z

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, 2021 at 11:52

KISHORE K J

66510 silver badges6 bronze badges

Comments

KARTHIKEYAN.A · Accepted Answer · 2022-04-11 07:41:51Z

2

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, 2022 at 7:41

KARTHIKEYAN.A

20.5k11 gold badges139 silver badges151 bronze badges

2 Comments

Kunal Tyagi Over a year ago

writing exact is not necessary in react-router-dom v6

Matt S Over a year ago

Correction: <Route exact> is gone. Instead, routes with descendant routes (defined in other components) use a trailing * in their path to indicate they match deeply. reactrouter.com/docs/en/v6/upgrading/…

Taher Salah · Accepted Answer · 2024-04-24 20:52:32Z

2

you can Correct import:-

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

answered Apr 24, 2024 at 20:52

Taher Salah

4575 silver badges1 bronze badge

Comments

Dionne Chelini · Accepted Answer · 2021-10-21 09:10:29Z

0

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

answered Oct 21, 2021 at 9:10

Dionne Chelini

1

Comments

unify · Accepted Answer · 2022-02-01 17:22:11Z

0

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

answered Feb 1, 2022 at 17:22

unify

6,3714 gold badges37 silver badges38 bronze badges

Comments

Suraj Rao · Accepted Answer · 2022-07-23 04:33:35Z

0

This might helps you in react-router-dom v6

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

edited Jul 23, 2022 at 4:33

Suraj Rao

29.7k11 gold badges96 silver badges104 bronze badges

answered Jul 23, 2022 at 3:56

Aman Jha

5528 silver badges8 bronze badges

Comments

Yaz Rae · Accepted Answer · 2023-04-15 12:49:55Z

0

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'

answered Apr 15, 2023 at 12:49

Yaz Rae

364 bronze badges

Comments

Rahul Sukare · Accepted Answer · 2024-03-18 07:14:33Z

0

Go to index.js file and wrap <App/> inside <BrowerRoute>

<BrowserRouter>
    <App/>                                                   
</BrowserRouter>

and you are done :0

answered Mar 18, 2024 at 7:14

Rahul Sukare

1

Comments

hazrat sultani · Accepted Answer · 2024-03-26 05:34:23Z

0

it was not working and giving me this type error: TypeError: Cannot read properties of undefined (reading 'pathname') unfortunately, i was typing mistake the to attribute when i was using NavLink. you can solve this try to remember write "to" attribute in the correct way.

answered Mar 26, 2024 at 5:34

hazrat sultani

1

1 Comment

Community Over a year ago

As it’s currently written, your answer is unclear. Please edit to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers in the help center.

Collectives™ on Stack Overflow

React Router: Cannot read property 'pathname' of undefined

20 Answers 20

1 Comment

1 Comment

1 Comment

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Comments

2 Comments

Comments

Comments

Comments

Comments

Comments

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

20 Answers 20

1 Comment

1 Comment

1 Comment

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Comments

2 Comments

Comments

Comments

Comments

Comments

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related