Material UI - 我的卡片組件正在添加到我的 Appbar。 我希望卡片在點擊 Appbar 的按鈕后顯示

Question

命名約定已關閉。 請忽略那些。

Appbar 的部分代碼：

const useStyles = makeStyles((theme) => ({
  root: {
    flexGrow: 1
  },
  title: {
    flexGrow: 1
  }
}));

export default function Appp() {
  const classes = useStyles();
  const history = useHistory();

  return (
    <div className={classes.root}>
      <Router>
        <AppBar position="static" display="flex">
          <Toolbar>
            <Typography variant="h6" className={classes.title}>
              Employee Management
            </Typography>
            <Button
              variant="contained"
              color="secondary"
              className={classes.button}
            >
              <Link to="/emp">Fetch Employees</Link>
            </Button>
            <Switch>
              <Route exact path="/emp" render={(props) => <App {...props} />} />
            </Switch>
          </Toolbar>
        </AppBar>
        <br/>
      </Router>
    </div>
  );
}

App 組件（“user”是從 API 調用接收的 JSON 數據）：

 return (
    <div className="App">
      {user &&
        user.map((singleUser) => {
          return (
            <SimpleCard
              nam={singleUser.name}
              uname={singleUser.username}
              ph={singleUser.phone}
              wb={singleUser.website}
            ></SimpleCard>
          );
        })}
    </div>
  );
}

SimpleCard 組件：

export default function SimpleCard(props) {
  const classes = useStyles();

  return (
    <Card padding={6} style={{ backgroundColor: "red", display: "inline-block" }}>
      <CardContent>
        <Typography
          className={classes.title}
          color="textSecondary"
          gutterBottom
        >
          <h1>{props.nam}</h1>
        </Typography>
        <Typography variant="h5" component="h5">
          #{props.uname}
        </Typography>
        <Typography className={classes.pos} color="textPrimary">
          adjective
        </Typography>
        <Typography variant="body2" component="p">
          well meaning and kindly.
          <br />
        </Typography>
      </CardContent>
    </Card>
  );
}

因此，當單擊“獲取員工”按鈕時，我希望顯示包含信息的卡片。 然而，它們只是被添加到 Appbar 中，UI 一團糟。

Answer 1

return (
    <div className={classes.root}>
       
      <Router>
<AppBar position="static" display="flex">
          <Toolbar>
            <Typography variant="h6" className={classes.title}>
              Employee Management
            </Typography>
            <Button
              variant="contained"
              color="secondary"
              className={classes.button}
            >
              <Link to="/emp">Fetch Employees</Link>
            </Button>
          </Toolbar>
        </AppBar>
        <br/>
        <Switch>
              <Route exact path="/emp" render={(props) => <App {...props} />} />
            </Switch>
      </Router>
    </div>
  );

您只需要將導航器移出欄