尝试使用 <Link> 链接我的导航栏，但它阻止我的组件呈现帮助

问题描述

所以我正在尝试使用打字稿和材质 UI 创建导航栏。但我似乎无法获得与文件链接的文本。早些时候，项目列表在测试时显示，但是一旦我将“路径”字符串和材质 ui 添加到返回函数，我的整个抽屉组件就停止渲染。你能帮我找出我的错误以及我应该考虑的方法吗。

import {
  MouseEventHandler,useState,} from "react";
import useStyles from "./styles";
import {
  AppBar,Avatar,Divider,Drawer,List,ListItem,ListItemIcon,ListItemText,Toolbar,} from "@material-ui/core";

import {
  ArrowBackIos,ChevronLeft,CloudUpload,Home,Menu,Settings,} from "@material-ui/icons";
import AuthContext from "../../lib/authContext";

const listItems = [
  { text: "Home",path:"src/pages/_app.tsx",Icon: Home },{ text: "Upload Music",path: "/src/pages/upload/index.tsx",Icon: CloudUpload },{ text: "Settings",path: "/src/pages/profile/index.tsx",Icon: Settings },];

const Navbar = () => {
  const classes = useStyles();
  const [open,setopen] = useState(false);
  //const {user} = useContext(AuthContext)
  const handleClick = () => setopen(!open);

  return (
    <>
      <AppBar color="transparent" elevation={0} position="static">
        <Toolbar className={classes.toolbar}>
          <ArrowBackIos />
          <Menu onClick={handleClick} />
        </Toolbar>
      </AppBar>

      <Drawer
        className={classes.drawer}
        variant="temporary"
        anchor="left"
        open={open}
        classes={{
          paper: classes.drawerPaper,}}
      >
        <div className={classes.drawerHeader}>
          <ChevronLeft onClick={handleClick} />
          <Avatar src="/images/avatar.svg" alt="profile" />
        </div>
        
        <List>
          {listItems.map(({ text,path,Icon }) => (
            <ListItem  button key={path}>
                <ListItemIcon>
                  <Icon />
                </ListItemIcon>
                <ListItemText primary={text} />
            </ListItem>
            
          ))}
        </List>
        <Divider />
      </Drawer>
    </>
  );
};

export default Navbar;

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）