Navigate To The URL Without React-router - "_this.props.history Is Undefined" Error

I'm trying to check authentity using tokens while loading the app and when user is not authorized navigate him to the log-in page. This method is inserted into Navbar component bec

Solution 1:

In this case, you need to use the withRouter method from React Router. This will create a higher order component which receives all the router props. So instead of HomeNavbar, you'll have this:

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

// create a new home navbar with router.
const HomeNavbarWithRouter = withRouter(HomeNavbar)

// after creating this, your HomeNavbar component will receive all the router props // such as `history, match, location`

// Finally, mount the HomeNavbarWithRouter instead:

<HomeNavbarWithRouter />

Solution 2:

I think you can do it like this

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

class HomeNavbar extends React.Component {
    redner() { return (<div>Whatever should be here</div>); }
}

export default withRouter(HomeNavbar);

This will make history available in your component props.