TypeError: Cannot read property 'history' of undefined
For the /
route you should use render like this:
<Route exact path="/" render={() => {
if (Auth.isUserAuthenticated()) {
(<DashboardPage)/>)
} else {
(<HomePage/>)
}
}} />
For your /logout
route using <Redirect>
<Route path="/logout" render={() => {
Auth.deauthenticateUser();
return <Redirect to={{ pathname: "/login" }} />;
}}
/>
I post a second solution for the /logout path using withRouter and this.props.history.push('/login').
- Point the /logout Route to its own component "Logout"
- wrap the Logout component with withRouter method from react-router-dom.
Logout.js
import React, { Component } from "react";
import Auth from "../modules/Auth";
import { withRouter } from "react-router-dom";
class Logout extends Component {
constructor(props) {
super(props);
this.handleLogout = this.handleLogout.bind(this);
}
handleLogout() {
Auth.deauthenticateUser();
this.props.history.push("/login");
}
render() {
return (
<div>
{this.handleLogout()}
</div>
);
}
}
export default withRouter(Logout);