Реагирует на страницу ошибки динамического частного маршрута JS

Question

Итак, у меня есть защищенная / приватная страница маршрута, которая отображает страницу с ошибкой, но я хочу, чтобы она была динамической, когда я передаю ей сообщение об ошибке, но моя проблема - всякий раз, когда я пытаюсь проверить защиту маршрута, набрав url 'localhost: 3000 / error "Я получаю сообщение об ошибке: не могу прочитать свойство" name "из неопределенного.Как правильно сделать его динамическим всякий раз, когда я передаю ему реквизит, он отображает страницу ошибки

, вот как я перенаправляю на страницу ошибки.

this.props.history.push('/error', { errorMessage: e.message.toString() });

и защищенный маршрутвот так

import React, { Component } from 'react';
import { Route, Redirect } from 'react-router-dom';
import { observer } from 'mobx-react';

class ProtectedErrorPage extends Component {
  render() {
    const { component: Component, ...rest } = this.props;
    console.log('ProtectedErrorPage: <--(PROPS)-->', this.props);
    // const errorMessage = this.props.location.state.errorMessage;

    return (
      <Route
        {...rest}
        render={props => {
          if (true) {
            return <Component {...props} />;
          } else {
            return (
              <Redirect
                to={{
                  pathname: '/',
                  state: {
                    from: props.location,
                  },
                }}
              />
            );
          }
        }}
      />
    );
  }
}

export default observer(ProtectedErrorPage);

и страница ошибки похожа на

class ErrorPage extends Component {


  render() {

    return (
      <Container>
        <div className="sub-page">
          <Icon name="exclamation triangle" size="massive" color="red" />
          <Header as="h1" style={header}>
            {this._displayHeader()} <br />
            <Header.Subheader style={subheader}>
              {this._displaySubHeader()}
            </Header.Subheader>
          </Header>
          <Header as="h3" style={logoutNotice}>
            <br /> You will be logged out after <b>{out}</b> seconds.
            <br /> Please <b>CLOSE</b> your browser after logging out.
          </Header>
        </div>
      </Container>
    );
  }

  _logout() {
    const { out } = this.state;

    if (out > 0) {
      this.setState({
        out: out - 1,
      });
    } else {
      this.logs.clearUser();
      AuthHandler.logout(() => {
        this.props.history.push('/');
      });
    }
  }

  componentDidMount() {
    this.interval = setInterval(() => this._logout(), 1000);
  }

  componentWillUnmount() {
    clearInterval(this.interval);
  }

  _trackPage(page) {
    const upn = this.upn;

    if (this._hasTracked) {
      return page;
    } else {
      this.logs.setUser(upn);
      this.logs.pageView(page);
      this._hasTracked = true;
      return page;
    }
  }

  _displayHeader() {
    const errorMessage = this.props.location.state.errorMessage;

    if (errorMessage === 'forbidden') {
      return this._trackPage('Forbidden Page');
    } else if (errorMessage) {
      return this._trackPage('Error: Something went Wrong!');
    }
  }

  _displaySubHeader() {
    const errorMessage = this.props.location.state.errorMessage;
    if (errorMessage === 'forbidden') {
      return 'Access to this page is restricted. Please contact your site admin if you believe this was a mistake.';
    } else if (errorMessage) {
      return (
        <p>
          {errorMessage} <br /> Please take note of this error message when
          reporting.
        </p>
      );
    }
  }
}

export default observer(ErrorPage);

, поэтому моя проблема в том, что я получаю сообщение об ошибке Не могу прочитать свойство 'errorMessage' из неопределенного при попытке проверитьесли маршрут защищен, набрав «localhost: 3000 / error»

Правильно ли я передаю реквизиты?как мне сделать его динамически защищенным?