this.props.history.push 和 match 如何配合使用

Question

问题是，我点击菜单切换子页面，但是没有成功。

如图

菜单 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 PrimaryLayout

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

点击事件中 history.push('/su') , 期望是加载子页面suppliers,URL 都发生了变化，但是子页面不出来，变成空白页了。