Javascript 如何在reactjs中映射带有单个ListItem的路由？

我试图在我的react前端项目中使用material Ui。我已经实现了AppBar和drawer组件，它们工作得很好。这就是我迄今为止所取得的成就：

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

导出默认函数miniprawer（）{
const classes=useStyles（）；
const theme=useTheme（）；
const[open，setOpen]=React.useState（false）；
常量handleDrawerOpen=（）=>{
setOpen（真）；
};
常量handleDrawerClose=（）=>{
setOpen（假）；
};
返回(
代码基础
{theme.direction==='rtl'？：}
{['Home'，'Algorithms'，'DataStructures'].map（（文本，索引）=>(
{索引%2==0？：}
))}
);
}

现在我想用不同的路径来映射每个“家”、“数据结构”和“算法”。我已经实现了一种通过这种方式路由列表组件的方法

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

{['Home'，'Algorithms'，'DataStructures'].map（（文本，索引）=>(
{索引%2==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>

{topics.map（（文本，索引）=>(
{索引%2==0？：}
))}

我准备了一个小样本。这种结构适用于我所有的项目，一旦掌握了窍门，就可以很快实现

路线结构

此

pathIds

变量是一个对象，它保存路由的所有id值。当需要自动生成面包屑链接的参考时，这将非常有用

const pathIds = {
  home: 'home',
  ...
}

此

路径路由

变量是一个对象，它保存所有路径路由。只是路径路由

const pathRouting = {
  home: '/home',
  ...
}

主要结构对象：

const pageRoutes = {
  [pathIds.home]: {
    path: pathRouting.home,
    sidebarName: 'Homepage',
    icon: Dashboard,
    noRender: false,
    component: Home,
  },
  ...
}

这是主结构对象，包含生成HTML所需的所有信息（边栏、面包屑、路线等）

• 路径：从

  路径路由

  对象获取路径值。（必选）
• 侧名：侧栏上显示的文本。（必选）
• 图标：通常此图标仅显示在侧边栏上。如果您的菜单/侧栏/导航不需要它，您可以忽略此项。（可选）
• noRender：布尔值，用于指示是否将此对象渲染到侧栏。这对于不需要直接访问的路由（如404页面未找到页面）非常有用（可选）
• 组件：将用于渲染的React组件。（必选）

然后，在

app.js

中，像往常一样导入

pageRoutes

。在进行映射或迭代工作之前，您可能需要将此对象转换为数组（或者使用像

lodash

这样的库直接迭代对象）

const routarray=Object.value（pageRoutes）

然后：

您将看到它仅在侧边栏上呈现主页、收件箱和重置密码。但您可以直接输入
/register
使
显示。未找到
/页面的相同内容
。或者，即使您输入了错误的地址，如
/register user
，
组件也将用于后备情况

您可能想知道为什么我不将所有路径路由和路径ID放在自己的位置，为什么我需要将它们移动到一个单独的对象中？答案是，在我的情况下，我通常需要快速访问这些值。这对于生成面包屑或在不拉动整个对象的情况下进行一些迭代可能很有用。根据您的具体项目需要，这两个可能会缩短

有关完整代码，您可以访问此处：
您的思路是正确的，但这只是一个开始。如果你没有集中处理相关的路由问题，那么你可能会发现自己在项目发展壮大的情况下遇到麻烦。我是react的新手，你能为我推荐一个相同的参考吗。
<Switch>
  {routeArray.map((prop, key) => {
    return (
      <Route
        path={prop.path}
        component={prop.component}
        exact={prop.exact || false}
        key={`route-${key}`}
      />
    );
  })}
  <Route component={pageRoutes[pathIds.error404].component} />
</Switch>

<List component="nav" aria-label="main mailbox folders">
  {routes.map(({ path, noRender, sidebarName, ...prop }, index) => {
    if (noRender) return null;

    return (
      <NavLink to={path} key={`route-${index}}`}>
        <ListItem button>
          <ListItemIcon>
            <prop.icon />
          </ListItemIcon>
          <ListItemText primary={sidebarName} />
        </ListItem>
      </NavLink>
    );
  })}
</List>