如何在reactjs中使用材质ui仅显示登录页面？

我不熟悉ui/core材料，在制作组件时有点困惑。问题是，没有Appbar和Drawer，我无法显示登录页面。我想显示完整的登录页面没有标题和边栏。在这个问题上有人能帮我吗

下面是全部代码：“

登录页面代码：

import React from 'react';
import Avatar from '@material-ui/core/Avatar';
import Button from '@material-ui/core/Button';
import CssBaseline from '@material-ui/core/CssBaseline';
import TextField from '@material-ui/core/TextField';
import FormControlLabel from '@material-ui/core/FormControlLabel';
import Checkbox from '@material-ui/core/Checkbox';
import Link from '@material-ui/core/Link';
import Grid from '@material-ui/core/Grid';
import Box from '@material-ui/core/Box';
import LockOutlinedIcon from '@material-ui/icons/LockOutlined';
import Typography from '@material-ui/core/Typography';
import { makeStyles } from '@material-ui/core/styles';
import Container from '@material-ui/core/Container';

function Copyright() {
  return (
    <Typography variant="body2" color="textSecondary" align="center">
      {'Copyright © '}
      <Link color="inherit" href="https://material-ui.com/">
        Your Website
      </Link>{' '}
      {new Date().getFullYear()}
      {'.'}
    </Typography>
  );
}

const useStyles = makeStyles(theme => ({
  paper: {
    marginTop: theme.spacing(8),
    display: 'flex',
    flexDirection: 'column',
    alignItems: 'center',
  },
  avatar: {
    margin: theme.spacing(1),
    backgroundColor: theme.palette.secondary.main,
  },
  form: {
    width: '100%', // Fix IE 11 issue.
    marginTop: theme.spacing(1),
  },
  submit: {
    margin: theme.spacing(3, 0, 2),
  },
}));

export default function SignIn() {
  const classes = useStyles();

  return (
    <Container component="main" maxWidth="xs">
      <CssBaseline />
      <div className={classes.paper}>
        <Avatar className={classes.avatar}>
          <LockOutlinedIcon />
        </Avatar>
        <Typography component="h1" variant="h5">
          Sign in
        </Typography>
        <form className={classes.form} noValidate>
          <TextField
            variant="outlined"
            margin="normal"
            required
            fullWidth
            id="email"
            label="Email Address"
            name="email"
            autoComplete="email"
            autoFocus
          />
          <TextField
            variant="outlined"
            margin="normal"
            required
            fullWidth
            name="password"
            label="Password"
            type="password"
            id="password"
            autoComplete="current-password"
          />
          <FormControlLabel
            control={<Checkbox value="remember" color="primary" />}
            label="Remember me"
          />
          <Button
            type="submit"
            fullWidth
            variant="contained"
            color="primary"
            className={classes.submit}
          >
            Sign In
          </Button>
          <Grid container>
            <Grid item xs>
              <Link href="#" variant="body2">
                Forgot password?
              </Link>
            </Grid>
            <Grid item>
              <Link href="#" variant="body2">
                {"Don't have an account? Sign Up"}
              </Link>
            </Grid>
          </Grid>
        </form>
      </div>
      <Box mt={8}>
        <Copyright />
      </Box>
    </Container>
  );
}

从“React”导入React；
从“@material ui/core/Avatar”导入化身；
从“@material ui/core/Button”导入按钮；
从“@material ui/core/CssBaseline”导入CssBaseline；
从“@material ui/core/TextField”导入TextField；
从“@material ui/core/FormControlLabel”导入FormControlLabel；
从“@material ui/core/Checkbox”导入复选框；
从“@material ui/core/Link”导入链接；
从“@material ui/core/Grid”导入网格；
从“@material ui/core/Box”导入框；
从“@material ui/icons/LockOutlinedIcon”导入LockOutlinedIcon；
从“@material ui/core/Typography”导入排版；
从'@material ui/core/styles'导入{makeStyles}；
从“@material ui/core/Container”导入容器；
函数版权（）{
返回(
{'Copyright}
你的网站
{' '}
{新日期（）.getFullYear（）}
{'.'}
);
}
const useStyles=makeStyles（主题=>({
论文：{
marginTop：主题。间距（8），
显示：“flex”，
flexDirection:'列'，
对齐项目：“居中”，
},
化身：{
边距：主题。间距（1），
背景色：theme.palete.secondary.main，
},
表格：{
宽度：“100%”，//修复IE 11问题。
marginTop：主题。间距（1），
},
提交：{
边距：主题。间距（3,0,2），
},
}));
导出默认函数SignIn（）{
const classes=useStyles（）；
返回(
登录
登录
忘记密码了？
{“没有帐户？注册”}
);
}

尝试检查状态。您可以添加状态变量以验证用户是否已登录。如果没有，则不渲染标头。下面的代码示例（稍加修改）。而且

将状态从“false”更改为“true”以查看更改

import React from "react";
import "./styles.css";
import Header from "./Components/Header";
import Login from "./Components/Login";



function Display(props) {
  const isLoggedIn = props.isLoggedIn;
  if (isLoggedIn) {
    return <Header />;
  }
  return <Login />;
}

export default function App() {
  return (
    <Display className="App" isLoggedIn={false}>

    </Display>
  );
}

从“React”导入React；
导入“/styles.css”；
从“/Components/Header”导入标题；
从“/Components/Login”导入登录名；
功能显示（道具）{
const isLoggedIn=props.isLoggedIn；
如果（isLoggedIn）{
返回；
}
返回；
}
导出默认函数App（）{
返回(
);
}