React JS动态专用路由错误页面

Question

因此，我有一个受保护的/专用的路由页面，该页面呈现一个错误页面，但是我希望每当向它传递errorMessage时动态地将其呈现给我，但是我的问题是每当我尝试通过键入url'本地主机：3000 /错误'我得到一个错误：无法读取未定义的属性'名称'。每当我传递道具时如何正确地使其动态，它将呈现错误页面

这就是我重定向到错误页面的方式。

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);

所以我的问题是，当我尝试通过键入“ localhost：3000 / error”来测试路由是否受到保护时，出现无法读取未定义的属性“ errorMessage”的错误

我可以正确传递道具吗？如何使其受到动态保护？