材质 UI 中持久抽屉的路由

Posted 2023-04-13

【中文标题】材质 UI 中持久抽屉的路由

【英文标题】：Routing for persistant drawer in material 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 , ...] 这样构造你的数组并映射文本和组件而不担心索引？

【参考方案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 映射到这些项目。