Passing state in react-router is not working in react - reactjs

Question

I have a login page, after successfull login, i want to move to dashboard, where i want to pass the mail id of logged in user to dashboard, i tried passing it by using states but it is not working
from login,
if (this.Auth.getToken()) {
this.props.history.replace({
pathname: '/dashboard',
state: { email: this.state.email }
})
}
to dashboard,
componentDidMount() {
if (this.Auth.loggedIn()){
console.log(this.props.location.state.email)
}else {
this.props.history.replace('/login');
}
}
error,
TypeError: Cannot read property 'email' of undefined
Dashboard.componentDidMount
src/components/auth/Dashboard.js:15
12 | }
13 | componentDidMount() {
14 | if (this.Auth.loggedIn()){
> 15 | console.log(this.props.location.state.email)
16 | }else {
17 | this.props.history.replace('/login');
18 | }
full code of login:
import React, { Component } from 'react'
// import * as service from '../../services/service';
import AuthService from '../../services/AuthService'
class Login extends Component {
constructor() {
super()
this.state = {
email: '',
password: ''
}
this.Auth = new AuthService();
this.onChange = this.onChange.bind(this);
this.onSubmit = this.onSubmit.bind(this);
}
componentWillMount() {
if (this.Auth.loggedIn())
this.props.history.replace('/dashboard');
}
onChange(e) {
this.setState({ [e.target.name]: e.target.value })
}
onSubmit(e) {
e.preventDefault();
var user = {
email: this.state.email,
password: this.state.password
}
var form1 = document.getElementById("login");
if (form1.checkValidity() === true) {
this.Auth.login(user)
.then(res => {
if (this.Auth.getToken()) {
this.props.history.replace({
pathname: '/dashboard',
state: { email: this.state.email }
})
}
if (res.status === '404') {
document.getElementById('error').style.color = 'red';
document.getElementById('error').innerHTML = 'Mail Id or Password is Incorrect';
}
})
.catch(err => {
console.log(err);
})
}
}
render() {
return (
<div>
<div className="login">
<div className="container">
<div className="row">
<div className="col-md-8 m-auto">
<h1 className="display-4 text-center">Log In</h1>
<p className="lead text-center">Sign in to your account</p>
<form id="login" onSubmit={this.onSubmit} noValidate>
<span className="lead text-center" id='error'></span>
<div className="form-group">
<input type="email" className="form-control form-control-lg" placeholder="Email Address" name="email" onChange={this.onChange} required />
<div className="invalid-feedback">Enter valid email</div>
</div>
<div className="form-group">
<input type="password" className="form-control form-control-lg" placeholder="Password" name="password" minLength="5" onChange={this.onChange} required />
<div className="invalid-feedback">Enter atleast 5 characters.</div>
</div>
<input type="submit" className="btn btn-info btn-block mt-4" />
</form>
</div>
</div>
</div>
</div>
</div>
)
}
}
export default Login;
full code of dashboard,
import React, { Component } from 'react'
import { Link } from 'react-router-dom';
// import * as service from '../../services/service';
import AuthService from '../../services/AuthService'
class Dashboard extends Component {
constructor() {
super()
this.state = {
}
this.Auth = new AuthService();
}
componentDidMount() {
if (this.Auth.loggedIn()){
console.log(this.props.location.state.email)
}else {
this.props.history.replace('/login');
}
}
render() {
return (
<div>
<div className="dashboard">
<div className="container">
<div className="row">
<div className="col-md-8 m-auto">
<h1 className="display-4 text-center">Dashboard</h1>
</div>
</div>
</div>
</div>
</div>
)
}
}
export default Dashboard;
App.js
import React, { Component } from 'react';
import { Route, BrowserRouter as Router } from 'react-router-dom';
import './App.css';
import Navbar from './components/layout/Navbar'
import Footer from './components/layout/Footer'
import Landing from './components/layout/Landing'
import Login from './components/auth/Login'
import Dashboard from './components/auth/Dashboard'
import Register from './components/auth/Register'
import Logout from './components/auth/Logout'
import Profile from './components/auth/Profile'
class App extends Component {
render() {
return (
<Router>
<div className="App">
<Navbar />
<Route exact path="/" component={Landing} />
<div className="container">
<Route exact path="/login" component={Login} />
<Route exact path="/register" component={Register} />
<Route exact path="/dashboard" component={Dashboard} />
<Route exact path="/logout" component={Logout} />
<Route exact path="/profile" component={Profile} />
</div>
<Footer />
</div>
</Router>
);
}
}
export default App;

Answer 1

Update react-router version to ^4.0.0