在具有授权的React中使用受保护的路由时未显示HighChart

Question

我对图表高度有疑问。在Home.js中，当我在底部声明export default HomePage时，该图表将显示在屏幕上，但是当我声明export default withAuthorization (authCondition) (HomePage)时，该图表将不再显示。我认为withAuthorization.js文件存在问题，但我仍然没有发现错误。我想知道如何解决。谢谢大家！

这是Home.js

代码：

import React, { Component } from 'react';

import withAuthorization from './withAuthorization';
import HomeLiveChart from './HomeLiveChart';

class HomePage extends Component {

render() {
return (
    <div id="wrapper">
      <div className="main-content container">
        <div className="row small-spacing">
          <HomeLiveChart />
        </div>  
      </div>
  </div>
);
}
}

const authCondition = (authUser) => !!authUser;

export default withAuthorization(authCondition)(HomePage);
//export default HomePage;

这是Chart.js

代码：

import React, { Component } from 'react';

class HomeLiveChart extends Component {
    render() {
        return (
            <div>
            <div className="col-xs-6">
                <div className="box-content">
                    <div id="random-temp"></div>
                </div>
            </div>
            <div className="col-xs-6">
                <div className="box-content">
                    <div id="random-humi"></div>
                </div>
            </div>
            </div>
        )
    }
}

export default HomeLiveChart;

这是withAuthorization.js

代码：

import React from 'react';
import { withRouter } from 'react-router-dom';

import AuthUserContext from './AuthUserContext';
import { firebase } from '../firebase';
import * as routes from '../constants/routes';

const withAuthorization = (authCondition) => (Component) => {
  class WithAuthorization extends React.Component {
    componentDidMount() {
      firebase.auth.onAuthStateChanged(authUser => {
        if (!authCondition(authUser)) {
          this.props.history.push(routes.SIGN_IN);
        }
      });
    }

    render() {
      return (
        <AuthUserContext.Consumer>
          {authUser => authUser ? <Component /> : null}
        </AuthUserContext.Consumer>
      );
    }
  }

  return withRouter(WithAuthorization);
}

export default withAuthorization;

这是AuthUserContext.js

代码：

import React from 'react';

const AuthUserContext = React.createContext(null);

export default AuthUserContext;

在Home.js中声明export default withAuthorization (authCondition) (HomePage)时屏幕不显示图表