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"

Bushy

You want to use the BrowserRouter component not Router. – Cobbs

Answer 1

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.

Competitor

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

Answer 2

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.

Jeramey

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! – Flight

Answer 3

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

Gromwell

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. – Tugman

Answer 4

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="#">

Negation

Answer 5

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

Nauseate

Answer 6

Just use BrowserRouter as Router, instead of Router

Apodal

Answer 7

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

Henrietta

Answer 8

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.

Bronchiole

Answer 9

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

Norther

Answer 10

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

Romanaromanas

Answer 11

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

Dextroglucose

Answer 12

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> 
  );
}

Ought

Answer 13

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>

Extemporaneous

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

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/… – Fluoric

Answer 14

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

Funnyman

Answer 15

For react-router v6 you should do this (use element and enclose all routes in `: https://mcmap.net/q/134150/-matched-leaf-route-at-location-quot-quot-does-not-have-an-element

Quicken

Answer 16

This might helps you in react-router-dom v6

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

Zoochemistry

Answer 17

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'

Friary

Answer 18

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

<BrowserRouter>
    <App/>                                                   
</BrowserRouter>

and you are done :0

Permanency

Answer 19

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.

Indigene

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. – Ricercar

Answer 20

you can Correct import:-

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

Attract