如何在reactjs中使用单个ListItem映射路由?

问题描述 投票:1回答:1

我正在尝试在我的React前端项目中使用材料Ui。我已经实现了AppBar和抽屉组件,它们工作正常。这是我到目前为止所取得的成就:

export default function MiniDrawer() {
  const classes = useStyles();
  const theme = useTheme();
  const [open, setOpen] = React.useState(false);

  const handleDrawerOpen = () => {
    setOpen(true);
  };

  const handleDrawerClose = () => {
    setOpen(false);
  };

  return (
    <div className={classes.root}>
      <CssBaseline />
      <AppBar style={{background: 'black'}}
        position="fixed"
        className={clsx(classes.appBar, {
          [classes.appBarShift]: open,
        })}
      >
        <Toolbar>
          <IconButton
            color="inherit"
            aria-label="open drawer"
            onClick={handleDrawerOpen}
            edge="start"
            className={clsx(classes.menuButton, {
              [classes.hide]: open,
            })}
          >
            <MenuIcon />
          </IconButton>
          <Typography className={classes.mystyle} variant="h5" >
            CodeBasics
          </Typography>
        </Toolbar>
      </AppBar>
      <Drawer
        variant="permanent"
        className={clsx(classes.drawer, {
          [classes.drawerOpen]: open,
          [classes.drawerClose]: !open,
        })}
        classes={{
          paper: clsx({
            [classes.drawerOpen]: open,
            [classes.drawerClose]: !open,
          }),
        }}
        open={open}
      >
        <div className={classes.toolbar}>
          <IconButton onClick={handleDrawerClose}>
            {theme.direction === 'rtl' ? <ChevronRightIcon /> : <ChevronLeftIcon />}
          </IconButton>
        </div>
        <Divider />
        <List>
          {['Home', 'Algorithms', 'DataStructures'].map((text, index) => (
            <ListItem button key={text}>
              <ListItemIcon>{index % 2 === 0 ? <InboxIcon /> : <MailIcon />}</ListItemIcon>
              <ListItemText primary={text} />
            </ListItem>
          ))}
        </List>
        <Divider />
      </Drawer>
      <main className={classes.content}>
        <div className={classes.toolbar} />
        <Layout>
              <Router>
                <Switch>
                  <Route exact path="/" component={Home} />
                  <Route path="/about" component={About} />
                  <Route path="/DataStructures" component={DataStructures} />
                </Switch>
              </Router>
            </Layout>
      </main>
    </div>
  );
}

现在,我想用不同的路线映射每个'Home','DataStructures'和'Algorithms'。我已经实现了以这种方式路由List组件的方法。

         <List>
          {['Home', 'Algorithms', 'DataStructures'].map((text, index) => (
            <ListItem button key={text} component="a" href="www.google.com">
              <ListItemIcon>{index % 2 === 0 ? <InboxIcon /> : <MailIcon />}</ListItemIcon>
              <ListItemText primary={text} />
            </ListItem>
          ))}
        </List>

但只有这样,我才能进入列表中每个项目的相同链接。如何映射带有单独路线的单个列表项?

javascript css reactjs react-router-dom
1个回答
0
投票

我已经找到了实现此目标的方法,如果有经验的人可以指导这是否是正确的方法。

首先,我创建了一个对象数组,例如:

 const topics= [{
      topic: "Home",
      path: "home"
  },
{
    topic: "DataStructures",
    path: "datastructures"
}]

然后我这样做:

<List>
          {topics.map((text, index) => (
            <ListItem button key={text.topic} component="a" href={text.path === "home"? "\\":text.path}>
              <ListItemIcon>{index % 2 === 0 ? <InboxIcon /> : <MailIcon />}</ListItemIcon>
              <ListItemText primary={text.topic} />
            </ListItem>
          ))}
        </List>

这是正确的方法吗?预先感谢。

© www.soinside.com 2019 - 2024. All rights reserved.