Reactjs 如何通过单击菜单访问页面

我开始学习React已经很短时间了，我很难通过单击组件菜单访问另一个页面。 在React文档之后，我有以下代码：

import React from 'react';
import { makeStyles } from '@material-ui/core/styles';
import Drawer from '@material-ui/core/Drawer';
import CssBaseline from '@material-ui/core/CssBaseline';
import AppBar from '@material-ui/core/AppBar';
import Toolbar from '@material-ui/core/Toolbar';
import List from '@material-ui/core/List';
import Typography from '@material-ui/core/Typography';
import Divider from '@material-ui/core/Divider';
import ListItem from '@material-ui/core/ListItem';
import ListItemIcon from '@material-ui/core/ListItemIcon';
import ListItemText from '@material-ui/core/ListItemText';
import InboxIcon from '@material-ui/icons/MoveToInbox';
import MailIcon from '@material-ui/icons/Mail';

const drawerWidth = 240;

const useStyles = makeStyles(theme => ({
  root: {
    display: 'flex',
  },
  appBar: {
    width: `calc(100% - ${drawerWidth}px)`,
    marginLeft: drawerWidth,
  },
  drawer: {
    width: drawerWidth,
    flexShrink: 0,
  },
  drawerPaper: {
    width: drawerWidth,
  },
  toolbar: theme.mixins.toolbar,
  content: {
    flexGrow: 1,
    backgroundColor: theme.palette.background.default,
    padding: theme.spacing(3),
  },
}));

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

  return (
    <div className={classes.root}>
      <CssBaseline />
      <AppBar position="fixed" className={classes.appBar}>
        <Toolbar>
          <Typography variant="h6" noWrap>
            Permanent drawer
          </Typography>
        </Toolbar>
      </AppBar>
      <Drawer
        className={classes.drawer}
        variant="permanent"
        classes={{
          paper: classes.drawerPaper,
        }}
        anchor="left"
      >
        <div className={classes.toolbar} />
        <Divider />
        <List>
          {['Inbox', 'Starred', 'Send email', 'Drafts'].map((text, index) => (
            <ListItem button key={text}>
              <ListItemIcon>{index % 2 === 0 ? <InboxIcon /> : <MailIcon />}</ListItemIcon>
              <ListItemText primary={text} />
            </ListItem>
          ))}
        </List>
        <Divider />
        <List>
          {['All mail', 'Trash', 'Spam'].map((text, index) => (
            <ListItem button key={text}>
              <ListItemIcon>{index % 2 === 0 ? <InboxIcon /> : <MailIcon />}</ListItemIcon>
              <ListItemText primary={text} />
            </ListItem>
          ))}
        </List>
      </Drawer>
      <main className={classes.content}>
        <div className={classes.toolbar} />
        <Typography paragraph>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt
          ut labore et dolore magna aliqua. Rhoncus dolor purus non enim praesent elementum
          facilisis leo vel. Risus at ultrices mi tempus imperdiet. Semper risus in hendrerit
          gravida rutrum quisque non tellus. Convallis convallis tellus id interdum velit laoreet id
          donec ultrices. Odio morbi quis commodo odio aenean sed adipiscing. Amet nisl suscipit
          adipiscing bibendum est ultricies integer quis. Cursus euismod quis viverra nibh cras.
          Metus vulputate eu scelerisque felis imperdiet proin fermentum leo. Mauris commodo quis
          imperdiet massa tincidunt. Cras tincidunt lobortis feugiat vivamus at augue. At augue eget
          arcu dictum varius duis at consectetur lorem. Velit sed ullamcorper morbi tincidunt. Lorem
          donec massa sapien faucibus et molestie ac.
        </Typography>
        <Typography paragraph>
          Consequat mauris nunc congue nisi vitae suscipit. Fringilla est ullamcorper eget nulla
          facilisi etiam dignissim diam. Pulvinar elementum integer enim neque volutpat ac
          tincidunt. Ornare suspendisse sed nisi lacus sed viverra tellus. Purus sit amet volutpat
          consequat mauris. Elementum eu facilisis sed odio morbi. Euismod lacinia at quis risus sed
          vulputate odio. Morbi tincidunt ornare massa eget egestas purus viverra accumsan in. In
          hendrerit gravida rutrum quisque non tellus orci ac. Pellentesque nec nam aliquam sem et
          tortor. Habitant morbi tristique senectus et. Adipiscing elit duis tristique sollicitudin
          nibh sit. Ornare aenean euismod elementum nisi quis eleifend. Commodo viverra maecenas
          accumsan lacus vel facilisis. Nulla posuere sollicitudin aliquam ultrices sagittis orci a.
        </Typography>
      </main>
    </div>
  );
}

从“React”导入React；
从'@material ui/core/styles'导入{makeStyles}；
从“@material ui/core/Drawer”导入抽屉；
从“@material ui/core/CssBaseline”导入CssBaseline；
从“@material ui/core/AppBar”导入AppBar；
从“@material ui/core/Toolbar”导入工具栏；
从“@material ui/core/List”导入列表；
从“@material ui/core/Typography”导入排版；
从“@material ui/core/Divider”导入分隔器；
从“@material ui/core/ListItem”导入ListItem；
从“@material ui/core/ListItemIcon”导入ListItemIcon；
从“@material ui/core/ListItemText”导入ListItemText；
从“@material ui/icons/MoveToInbox”导入InBoxion；
从“@material ui/icons/Mail”导入MailIcon；
常数抽屉宽度=240；
const useStyles=makeStyles（主题=>({
根目录：{
显示：“flex”，
},
appBar：{
宽度：`calc（100%-${drawerWidth}px）`，
页边左侧：抽屉宽度，
},
出票人：{
宽度：抽屉宽度，
flexShrink:0，
},
抽屉纸：{
宽度：抽屉宽度，
},
工具栏：theme.mixins.toolbar，
内容：{
flexGrow:1，
backgroundColor:theme.palette.background.default，
填充：主题。间距（3），
},
}));
导出默认函数PermanentDrawerLeft（）{
const classes=useStyles（）；
返回(
永久出票人
{['Inbox'，'Starred'，'Send email'，'Drafts'].map（（文本，索引）=>(
{索引%2==0？：}
))}
{['All mail'，'Trash'，'Spam'].map（（文本，索引）=>(
{索引%2==0？：}
))}
Lorem ipsum dolor sit amet，是一位杰出的职业经理人，他是一位临时雇员
我们的劳动和财富是巨大的，我们的财富是不可替代的
设施为利奥·维勒·里苏斯（ultrices mi tempus imperdiet）。亨德雷特（hendrerit）的森佩尔·里苏斯（Semper Risus）
妊娠期芸香属非黄花芸香，黄花芸香属黄花芸香属，黄花芸香属，黄花芸香属，黄花芸香属，黄花芸香属，黄花芸香属，黄花芸香属，黄花芸香属，黄花芸香属，黄花芸香属
多奈克·尤里塞斯。奥迪奥·莫尔比·奎斯·奥迪奥·埃尼安·阿梅特·尼塞尔·苏西比特
这是一个不可数的整数，它是一个可以活下去的整数。
狮子座狮子座狮子座狮子座狮子座狮子座狮子座狮子座狮子座狮子座狮子座狮子座狮子座狮子座狮子座狮子座狮子座狮子座狮子座狮子座狮子座狮子座狮子座狮子座狮子座狮子座狮子座狮子座狮子座狮子座狮子座狮子座狮子座狮子座狮子座狮子座狮子座狮子座
在奥古斯都，在奥古斯都，在奥古斯都，在奥古斯都，在奥古斯都
在圣殿里，人们用各种各样的口头禅来表达自己的心声
donec massa sapien faucibus et molestie ac。
毛里斯·努克（mauris nunc）委员会的研究结果表明，这是一种生活方式
肺动脉直径为1/2的尊严设施
tincidunt。Ornare suspendisse sed nisi lacus sed viverra tellus。Purus坐在阿梅特·帕特的座位上
莫里斯会议。莫尔比会议上的欧盟设施元素。莫里斯会议上的拉齐尼亚会议
死亡之神，死亡之神，死亡之神，死亡之神，死亡之神，死亡之神，死亡之神，死亡之神，死亡之神，死亡之神，死亡之神，死亡之神
亨德雷特孕妇rutrum quisque non tellus orci ac.Pellentsque nec nam aliquam sem et
tortor.居住者morbi tristique Sentectus和Adipising Elite duis tristique sollicitudin
nibh sit。Ornare aenean euismod elementum nisi quis eleifend。Commodo viverra maecenas
面部积陷性腔隙。睾丸矢状肌不等长。
);
}

它返回带有一些按钮/页面的侧菜单。 我已经创建了这些页面，但我不知道如何通过点击菜单中的页面来引导每个页面。 谢谢你的帮助，谢谢

我使用了变量，并在菜单项上单击 它设置变量并在帮助下进行条件渲染 这些变量

从“React”导入React；
从'@material ui/core/styles'导入{makeStyles}；
从“@material ui/core/Drawer”导入抽屉；
从“@material ui/core/CssBaseline”导入CssBaseline；
从“@material ui/core/AppBar”导入AppBar；
从“@material ui/core/Toolbar”导入工具栏；
从“@material ui/core/List”导入列表；
从“@material ui/core/Typography”导入排版；
从“@material ui/core/Divider”导入分隔器；
从“@material ui/core/ListItem”导入ListItem；
从“@material ui/core/ListItemIcon”导入ListItemIcon；
从“@material ui/core/ListItemText”导入ListItemText；
从“@material ui/icons/MoveToInbox”导入InBoxion；
从“@material ui/icons/Mail”导入MailIcon；
const收件箱=（）=>{
返回(
欢迎访问收件箱页面
)
}
常量开始=（）=>{
返回(
欢迎来到首页
)
}
常数抽屉宽度=240；
const useStyles=makeStyles（主题=>({
根目录：{
显示：“flex”，
},
appBar：{
宽度：`calc（100%-${drawerWidth}px）`，
页边左侧：抽屉宽度，
},
出票人：{
宽度：抽屉宽度，
flexShrink:0，
},
抽屉纸：{
宽度：抽屉宽度，
},
工具栏：theme.mixins.toolbar，
内容：{
flexGrow:1，
backgroundColor:theme.palette.background.default，
填充：主题。间距（3），
},
}));
导出默认函数PermanentDrawerLeft（）{
const classes=useStyles（）；
import React from 'react';
    import { makeStyles } from '@material-ui/core/styles';
    import Drawer from '@material-ui/core/Drawer';
    import CssBaseline from '@material-ui/core/CssBaseline';
    import AppBar from '@material-ui/core/AppBar';
    import Toolbar from '@material-ui/core/Toolbar';
    import List from '@material-ui/core/List';
    import Typography from '@material-ui/core/Typography';
    import Divider from '@material-ui/core/Divider';
    import ListItem from '@material-ui/core/ListItem';
    import ListItemIcon from '@material-ui/core/ListItemIcon';
    import ListItemText from '@material-ui/core/ListItemText';
    import InboxIcon from '@material-ui/icons/MoveToInbox';
    import MailIcon from '@material-ui/icons/Mail';


    const Inbox = () => {
        return (
            <React.Fragment>
                <h1> Welcom To Inbox Page</h1>
            </React.Fragment>
        )
    }

    const Start = () => {
        return (
            <React.Fragment>
                <h1> Welcom To Started Page</h1>
            </React.Fragment>
        )
    }

    const drawerWidth = 240;

    const useStyles = makeStyles(theme => ({
        root: {
            display: 'flex',
        },
        appBar: {
            width: `calc(100% - ${drawerWidth}px)`,
            marginLeft: drawerWidth,
        },
        drawer: {
            width: drawerWidth,
            flexShrink: 0,
        },
        drawerPaper: {
            width: drawerWidth,
        },
        toolbar: theme.mixins.toolbar,
        content: {
            flexGrow: 1,
            backgroundColor: theme.palette.background.default,
            padding: theme.spacing(3),
        },
    }));

    export default function PermanentDrawerLeft() {
        const classes = useStyles();
        const [showHome, setShowHome] = React.useState(false);
        const [showInbox, setshowInbox] = React.useState(false);

        function handleHomePage() {
            setShowHome(true);
            setshowInbox(false);
        }
        function handleInboxPage() {
            setShowHome(false);
            setshowInbox(true);
        }
        return (
            <div className={classes.root}>
                <CssBaseline />
                <AppBar position="fixed" className={classes.appBar}>
                    <Toolbar>
                        <Typography variant="h6" noWrap>
                            Permanent drawer
              </Typography>
                    </Toolbar>
                </AppBar>
                <Drawer
                    className={classes.drawer}
                    variant="permanent"
                    classes={{
                        paper: classes.drawerPaper,
                    }}
                    anchor="left"
                >
                    <div className={classes.toolbar} />
                    <Divider />
                    <List>
                        {['Inbox', 'Starred',].map((text, index) => (
                            <ListItem button key={text} onClick={() => {
                                if (text == "Inbox") {
                                    handleInboxPage();
                                } else if (text == "Starred") {
                                    handleHomePage();
                                }
                            }}>
                                <ListItemIcon>{index % 2 === 0 ? <InboxIcon /> : <MailIcon />}</ListItemIcon>
                                <ListItemText primary={text} />
                            </ListItem>
                        ))}
                    </List>
                </Drawer>
                <main className={classes.content}>
                    <div className={classes.toolbar} />
                    {showInbox && <Inbox />}
                    {showHome && <Start />}
                </main>
            </div>
        );
    }