close

[Solved] react router v^4.0.0 Uncaught TypeError: Cannot read property ‘location’ of undefined

Hello Guys, How are you all? Hope You all Are Fine. Today I get the following error react router v^4.0.0 Uncaught TypeError: Cannot read property ‘location’ of undefined in javascript. So Here I am Explain to you all the possible solutions here.

Without wasting your time, Let’s start This Article to Solve This Error.

How react router v^4.0.0 Uncaught TypeError: Cannot read property ‘location’ of undefined Error Occurs?

Today I get the following error react router v^4.0.0 Uncaught TypeError: Cannot read property ‘location’ of undefined in javascript.

How To Solve react router v^4.0.0 Uncaught TypeError: Cannot read property ‘location’ of undefined Error ?

  1. How To Solve react router v^4.0.0 Uncaught TypeError: Cannot read property 'location' of undefined Error ?

    To Solve react router v^4.0.0 Uncaught TypeError: Cannot read property 'location' of undefined Error Replace
    import { Router, Route, Link, browserHistory } from 'react-router';
    With
    import { BrowserRouter as Router, Route } from 'react-router-dom';
    It will start working. It is because react-router-dom exports BrowserRouter

  2. react router v^4.0.0 Uncaught TypeError: Cannot read property 'location' of undefined

    To Solve react router v^4.0.0 Uncaught TypeError: Cannot read property 'location' of undefined Error Replace
    import { Router, Route, Link, browserHistory } from 'react-router';
    With
    import { BrowserRouter as Router, Route } from 'react-router-dom';
    It will start working. It is because react-router-dom exports BrowserRouter

Solution 1

You’re doing a few things wrong.

  1. First, browserHistory isn’t a thing in V4, so you can remove that.
  2. Second, you’re importing everything from react-router, it should be react-router-dom.
  3. Third, react-router-dom doesn’t export a Router, instead, it exports a BrowserRouter so you need to import { BrowserRouter as Router } from 'react-router-dom.

Looks like you just took your V3 app and expected it to work with v4, which isn’t a great idea.

Solution 2

Replace

import { Router, Route, Link, browserHistory } from 'react-router';

With

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

It will start working. It is because react-router-dom exports BrowserRouter

Summery

It’s all About this issue. Hope all solution helped you a lot. Comment below Your thoughts and your queries. Also, Comment below which solution worked for you? Thank You.

Also Read

Leave a Comment