Material UI- 我的卡片组件正在添加到我的 Appbar 中。我希望卡片在单击 Appbar 按钮后显示

Question

命名约定已关闭。请忽略那些。

应用栏的部分代码：

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 组件（“用户”是从 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>
  );

您只需要将导航器从栏中移除即可

Material UI- 我的卡片组件正在添加到我的 Appbar 中。我希望卡片在单击 Appbar 按钮后显示

Material UI- My Card Component is getting added to my Appbar. I want the cards to show up once a button the Appbar is clicked

javascript

appbar

reactjs

material-ui

react-redux