Проходное состояние в реакции-роутер не работает в реакции

Question

У меня есть страница входа, после успешного входа в систему я хочу перейти на панель инструментов, где я хочу передать идентификатор почты зарегистрированного пользователя на панель инструментов, я попытался passing это using states, но это не работает

от login,

if (this.Auth.getToken()) {
            this.props.history.replace({
              pathname: '/dashboard',
              state: { email: this.state.email }
            })
          }

до dashboard,

componentDidMount() {
    if (this.Auth.loggedIn()){
      console.log(this.props.location.state.email)
    }else {
      this.props.history.replace('/login');
    }
  }

ошибка

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 |   }

полный код логина:

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;

полный код приборной панели,

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

Обновление react-router версия до ^4.0.0