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

Question

The naming conventions are off. Please ignore those.

Part of the code for the 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>
  );
}

The App component ("user" is JSON data received from an API call):

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

The SimpleCard Component:

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>
  );
}

So when the Fetch Employees button is clicked, I want the cards with the information to show up. However they are just getting added in the Appbar and the UI is a mess.

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

You just need to remove your navigator out of the bar