物料UI中持久抽屉的路由

Question

我想用它来导航我的页面，但是我找不到如何正确地链接索引，

我已经试着把所有的东西都拆开了，但没用whit，，

和

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

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

Answer 1

只需为'Home' , 'About', 'Services', 'Contact'创建页面，并使用reach路由器的导航功能。

您只需要在app.js中用path="/app/home"等和要渲染到DOM的组件声明您的路由，然后使用navigation("/app/home"(，这样您就可以将数组更改为每个项上都有良好路由的对象，如

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

并用onClick在这些项目上进行映射。