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.constHomeNavbarWithRouter = 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

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

classHomeNavbarextendsReact.Component {
    redner() { return (<div>Whatever should be here</div>); }
}

exportdefaultwithRouter(HomeNavbar);

This will make history available in your component props.