Cannot read property 'location' of undefined for NavLink in ReactJS

Question

All what I am trying is a very basic implementation of a navigation bar.

"dependencies": {
    "bootstrap": "^3.3.7",
    "jquery": "^3.2.1",
    "react": "^15.4.1",
    "react-dom": "^15.4.1",
    "react-router": "^4.1.2",
    "react-router-dom": "^4.1.1"
  },

Here you can see my MainLayout component:

import React, { Component } from 'react';
import { Route, BrowserRouter } from 'react-router-dom';
import './MainLayout.css';
import ReportNavComponent from './ReportNavComponent';
import NumberOfPatients from '../reports/NumberOfPatients/NumberOfPatients';


class MainLayout extends Component {


    render() {
        return (
            <div className="pageContainer">
                <div className="reportNavBar">
                    <ReportNavComponent />
                </div>
                <div className="reportContent">

                    <BrowserRouter>
                        <Route path="/numberOfPatients" component={NumberOfPatients} />
                    </BrowserRouter>

                </div>
            </div>
        );
    }
}

export default MainLayout;

Below is my Navigation component which I have some sort of anchor tags.

import React, { Component } from 'react';
import { NavLink } from 'react-router-dom';
import './ReportNavMenu.css';


class ReportNavComponent extends Component {


    render() {
        return (
            <div className="container123">
                <div className="menuItem">
                    <p className="contentParagraph">
                        <i className="glyphicon glyphicon-list-alt float-left" ></i>

                        <NavLink exact activeClassName="active" to="/numberOfPatients">
                            List of Users
                        </NavLink>
                    </p>
                </div>
            </div>
        );
    }
}

export default ReportNavComponent;

I am getting the below exception:

Warning: Failed prop type: The prop `history` is marked as required in `Router`, but its value is `undefined`.
    in Router
printWarning @ vendor.bundle.js:869
warning @ vendor.bundle.js:893
checkReactTypeSpec @ vendor.bundle.js:3037
validatePropTypes @ vendor.bundle.js:2475
createElement @ vendor.bundle.js:2529
(anonymous) @ app.bundle.js:sourcemap:32
__webpack_require__ @ vendor.bundle.js:53
webpackJsonpCallback @ vendor.bundle.js:24
(anonymous) @ app.bundle.js:sourcemap:1
vendor.bundle.js:5744 Uncaught TypeError: Cannot read property 'location' of undefined
    at new Router (vendor.bundle.js:5744)
    at app.bundle.js:11393
    at measureLifeCyclePerf (app.bundle.js:11174)
    at ReactCompositeComponentWrapper._constructComponentWithoutOwner (app.bundle.js:11392)
    at ReactCompositeComponentWrapper._constructComponent (app.bundle.js:11378)
    at ReactCompositeComponentWrapper.mountComponent (app.bundle.js:11286)
    at Object.mountComponent (app.bundle.js:3735)
    at ReactCompositeComponentWrapper.performInitialMount (app.bundle.js:11469)
    at ReactCompositeComponentWrapper.mountComponent (app.bundle.js:11356)
    at Object.mountComponent (app.bundle.js:3735)
Router @ vendor.bundle.js:5744
(anonymous) @ app.bundle.js:11393
measureLifeCyclePerf @ app.bundle.js:11174
_constructComponentWithoutOwner @ app.bundle.js:11392
_constructComponent @ app.bundle.js:11378
mountComponent @ app.bundle.js:11286
mountComponent @ app.bundle.js:3735
performInitialMount @ app.bundle.js:11469
mountComponent @ app.bundle.js:11356
mountComponent @ app.bundle.js:3735
mountComponentIntoNode @ app.bundle.js:16594
perform @ app.bundle.js:4735
batchedMountComponentIntoNode @ app.bundle.js:16616
perform @ app.bundle.js:4735
batchedUpdates @ app.bundle.js:14103
batchedUpdates @ app.bundle.js:3381
_renderNewRootComponent @ app.bundle.js:16809
_renderSubtreeIntoContainer @ app.bundle.js:16891
render @ app.bundle.js:16912
(anonymous) @ app.bundle.js:32
__webpack_require__ @ vendor.bundle.js:53
webpackJsonpCallback @ vendor.bundle.js:24
(anonymous) @ app.bundle.js:1

vendor.bundle.js:5744 Uncaught TypeError: Cannot read property 'location' of undefined
    at new Router (vendor.bundle.js:5744)
    at app.bundle.js:11393
    at measureLifeCyclePerf (app.bundle.js:11174)
    at ReactCompositeComponentWrapper._constructComponentWithoutOwner (app.bundle.js:11392)
    at ReactCompositeComponentWrapper._constructComponent (app.bundle.js:11378)
    at ReactCompositeComponentWrapper.mountComponent (app.bundle.js:11286)
    at Object.mountComponent (app.bundle.js:3735)
    at ReactCompositeComponentWrapper.performInitialMount (app.bundle.js:11469)
    at ReactCompositeComponentWrapper.mountComponent (app.bundle.js:11356)
    at Object.mountComponent (app.bundle.js:3735)

Highly appreciate your help :)

Update: I have tried the below change, but didn't work. I get the same error:

class MainLayout extends Component {


    render() {
        return (
            <div className="pageContainer">
                <BrowserRouter>
                    <div>
                        <div className="reportNavBar">
                            <ReportNavComponent />
                        </div>
                        <div className="reportContent">
                            <Route path="/numberOfPatients" component={NumberOfPatients} />
                        </div>
                    </div>
                </BrowserRouter>
            </div>
        );
    }
}

Answer 1

You need to import 'history' and add it to BrowserRouter:

import React, { Component } from 'react';
import { Route, BrowserRouter } from 'react-router-dom';
import './MainLayout.css';
import ReportNavComponent from './ReportNavComponent';
import NumberOfPatients from '../reports/NumberOfPatients/NumberOfPatients';

import createBrowserHistory from 'history/createBrowserHistory';
const history = createBrowserHistory();


class MainLayout extends Component {


    render() {
        return(
            <div className="pageContainer">
                <BrowserRouter history={history}>
                    <div>
                        <div className="reportNavBar">
                            <ReportNavComponent />
                        </div>
                        <div className="reportContent">
                            <Route path="/numberOfPatients" component={NumberOfPatients} />
                        </div>
                    </div>
                </BrowserRouter>
            </div>
        )
    }
}

export default MainLayout;

Answer 2

I think history is required parameter for NavLink component but it is not available. You can use the withRouter. import the withRouter in your ReportNavComponent and do the following changes:

import { withRouter } from 'react-router-dom'

and below export this component as

export default withRouter(ReportNavComponent)

Answer 3

I think reason is, you are not rendering ReportNavComponent inside BrowserRouter, that's why ReportNavComponent is not getting those props values.

Write it like this:

return(
    <div className="pageContainer">
        <BrowserRouter>
            <div>
                <div className="reportNavBar">
                    <ReportNavComponent />
                </div>
                <div className="reportContent">
                    <Route path="/numberOfPatients" component={NumberOfPatients} />
                </div>
            </div>
        </BrowserRouter>
    </div>
)