React Material UI：使用 withStyles 和 React Router 时 this.props 未定义

Question

In the Parent Component, this.props exists and can find { classes } just fine. However, in the Child Component, this.props is undefined and { classes } cannot be found. Both are wrapped in a HOC, but the Child Component is rendered via React Router. Relevant code below, please let me know if you need any more context:

Parent:

import React, { Component } from "react";
import { withStyles } from '@material-ui/core/styles';
...
import styles from "../../assets/ParentPage/styles";
import theme from "../../assets/theme";
import LandingPageCard from './ParentPageCard';
import { Grid, ThemeProvider } from "@material-ui/core";
import { ChildComponent } from "../../components/NRLMSIS/MsisForm";

import {
  BrowserRouter as Router,
  Switch,
  Route,
  Link
} from "react-router-dom";

export class ParentPage extends Component {

  constructor(props) {
    super(props);
  }
  render() {
    const { classes } = this.props;

    return (
      <ThemeProvider theme={theme}>
        <Router>
            <Grid
              container
              spacing={4}
              className={classes.gridContainer}
              justify="center"
            >
              <Grid item xs={12} sm={6} md={4}>
                <Link to="/child">
                  <LandingPageCard />
                </Link>
              </Grid>
            </Grid>

            <Switch>
              <Route path="/child" component={ChildComponent} />
            </Switch>
        </Router>
      </ThemeProvider>
    );
  }
}

Child:

import React, {Component} from "react";
...
import theme from "../../assets/theme";
import styles from "../../assets/ChildCompnent/styles";

export class ChildCompnent extends Component {
    constructor(props) {
      super(props);

    render() {
      const { classes } = this.props;
      console.log("PROPS: ", this.props); // this.props == undefined
      return (
        <Grid container component="main" className={classes.root}>
          <CssBaseline/>
        </Grid>
      );
    }
  }
}

export default withStyles(styles)(ChildCompnent);

Answer 1

you did export default and the import is with {} , this is works because you added export to the class, but you have another export (default) with the styles... do:

import  ChildComponent from "../../components/NRLMSIS/MsisForm";