[Fix] TypeError Cannot Read Property 'pathname' Of Undefined At New Router 2023

The error “TypeError: Cannot read property ‘pathname’ of undefined at new Router” is an error that is invoked whenever you are coding in react.js. Given below is the snippet of the error:

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

I would like to share with you the steps I took to fix the “TypeError: Cannot read property ‘pathname’ of undefined at new Router” in your project file.

Why “TypeError Cannot read property ‘pathname’ of undefined at new Router” Error is Seen?

The error, “TypeError: Cannot read property ‘pathname’ of undefined at new Router” is seen because you might have been missed to include the to prop in one of the <Link/> components. The error is also seen because the api being used in React Router v4 is completely different.

The detailed solution to fix the error “TypeError: Cannot read property ‘pathname’ of undefined at new Router”, is given below:

How to fix “TypeError Cannot read property ‘pathname’ of undefined at new Router” Error?

To fix the error, you have to include the to prop in one of the <Link/> components. If error still persists then you have to change code as api in React Router v4 is different.

To fix the error, “TypeError: Cannot read property ‘pathname’ of undefined at new Router”, you have to follow the below mentioned steps:

First, you will have to include the to prop in one of the <Link/> components. This is one of the primary reason why the error is seen in most cases

If the error still persists then it is because the API in React Router v4 is totally different. You can try the below mentioned code to understand the API and solve the error in your case by making the necessary changes:

import React from "react";
import {
  BrowserRouter as Router,
  Switch,
  Route,
  Link
} from "react-router-dom";

export default function App() {
  return (
    <Router>
      <div>
        <nav>
          <ul>
            <li>
              <Link to="/">Home</Link>
            </li>
            <li>
              <Link to="/about">About</Link>
            </li>
            <li>
              <Link to="/users">Users</Link>
            </li>
          </ul>
        </nav>

You can read the documentation, to know how the other functions and methods work in the new API by following the link here.

As per official documentation on Reactrouter, you can use the to prop in one of the <Link/> components as shown below:

This should fix the error, “TypeError: Cannot read property ‘pathname’ of undefined at new Router”.

Conclusion

To fix the error “TypeError: Cannot read property ‘pathname’ of undefined at new Router”, you have to include the to prop in one of the <Link /> components. If the error persists then you have to change your code a bit as the api in React Router v4 is totally different