材质 UI 中持久抽屉的路由答案

【问题标题】：Routing for persistant drawer in material UI材质 UI 中持久抽屉的路由
【发布时间】：2021-09-28 14:44:08
【问题描述】：

我想用它作为我页面的导航，但我不知道如何正确链接索引，

我已经尝试将 l 项目分开，但没有奏效白,,

和


        <List>
          {['Home' , 'About', 'Services', 'Contact'].map((text, index) => (
            
            
            
            <ListItem button  key={text} >
              <ListItemIcon>
   {index === 0 && <HomeOutlinedIcon /> }
   {index === 1 && <InfoOutlined/>}
   {index === 2 && <SettingsOutlinedIcon />}
   {index === 3 && <MailIcon/>}
              </ListItemIcon>
                
              <ListItemText primary={text} />
            </ListItem>
            
          ))}
          
        </List>

谁能告诉我如何在这个列表中正确地路由我的导航。

【问题讨论】：

我不确定索引位，但为什么不像[{ text: 'Home', Component: HomeOutlinedIcon }, ...] 这样构造你的数组并映射文本和组件而不担心索引？

标签： javascript reactjs material-ui jsx drawer

【解决方案1】：

只需为'Home' , 'About', 'Services', 'Contact' 创建页面并使用reach-router 的导航功能。

您只需要在 app.js 中使用 path="/app/home" 等声明您的路由以及您要呈现到 DOM 的组件，然后使用 navigate("/app/home") 因此您应该将您的数组更改为像这样在每个项目上都有良好路线的对象

const fieldsNames = [
  { value: "Home", icon: <SvgIcon component={SearchIcon} />, path: "/app/home" },
]

并使用 onClick 映射到这些项目。

【讨论】：