the problem is that I clicked on the menu to switch to the subpage, but it didn"t work.
as shown in figure 
Materials click
clickMaterials = () => {
this.props.history.push("/su");
console.log("dddd clickMaterials ddddd");
console.log(this.props.match.path);
};
PrimaryLayout.js
......
render() {
const {component: Component, classes, ...rest } = this.props;
return (
<div className={classes.root}>
<Route {...rest} path="/su" component={PrimaryLayout} />import Suppliers from "./Suppliers"
import WAppBar from "./WAppBar"
import Dashboard from "./Supplier/Dashboard"
import { checkPropTypes } from "prop-types";
const PrimaryLayout = ({ match }) => (
<div className="primary-layout">
<main>
<Switch>
<Route path={`${match.path}`} exact component={Dashboard} />
<Route path={`${match.path}/su`} component={Suppliers} />
<Route path={`${match.path}/bar`} component={WAppBar} />
<Redirect to={`${match.url}`} />
</Switch>
{console.log("PrimaryLayout")}
</main>
</div>
)
export default PrimaryLayoutSuppliers.js
/*function Suppliers(props) {*/
class Suppliers extends React.Component {
state = {
open: false,
selectedValue: "33333333",
};
handleClickOpen = () => {
this.setState({
open: true,
});
console.log(this.state.open);
};
handleClose = () => {
this.setState({open: false });
};
render() {
const { classes } = this.props;
return (
<div className={classes.root}>
<STable/>
<br/>
<Button onClick={this.handleClickOpen} variant="contained" color="primary" className={classes.button}>Add</Button>
<Edit open={this.state.open} onClose={this.handleClose}></Edit>
</div>
);
}
}
Suppliers.propTypes = {
classes: PropTypes.object.isRequired,
};
export default withStyles(styles)(Suppliers);the history.push ("/ su") in the click event is expected to load the subpage suppliers,URL has changed, but the subpage does not come out and becomes a blank page.