为什么MaterialUI Drawer组件链接在实际外链前加localhost？

问题描述

我正在尝试将我的 LinkedIn 个人资料添加到抽屉组件，当我单击时，我在搜索栏中看到以下内容：

http://localhost:3000/https://www.linkedin.com/in/profile-here/

抽屉组件中的我的ListItem：

<ListItem
      component={Link}
      to="https://www.linkedin.com/in/profile-here/"
      exact
      button
      key={"LinkedIn"}
>
     <ListItemIcon>
        <LinkedInIcon />
      </ListItemIcon>
      <ListItemText primary={"LinkedIn"} />
    </ListItem>

我还尝试将 ListItem 元素包装在标签中，但得到了相同的结果。包装的 ListItem 示例：

    <Link to="https://www.linkedin.com/in/profile-here/">
      <ListItem button key={"LinkedIn"}>
        <ListItemIcon>
          <LinkedInIcon />
        </ListItemIcon>
        <ListItemText primary={"LinkedIn"} />
      </ListItem>
    </Link>

我还创建了一个简单的“关于”页面，并尝试为此添加一个链接。使用上述两种方法......它似乎有效，但表现不如预期。

而不是导航到只有以下内容的关于页面：

<div>This is the about page</div>

当单击抽屉中的“关于”按钮时，它会在抽屉菜单按钮旁边的导航栏中显示：

点击前：

点击打开抽屉：

点击“关于”链接后：

这是我添加到导航栏组件的整个 Drawer 组件，以防我在其他地方搞砸了：

const useStyles = makeStyles({
  list: {
    width: 250,},fullList: {
    width: "auto",});

function RightDrawer(props) {
  const classes = useStyles();
  const [state,setState] = React.useState({
    top: false,left: false,bottom: false,right: false,});

const toggleDrawer = (anchor,open) => (event) => {
  if (
    event.type === "keydown" &&
    (event.key === "Tab" || event.key === "Shift")
  ) {
    return;
  }

  setState({ ...state,[anchor]: open });
};

const list = (anchor) => (
<div
  className={clsx(classes.list,{
    [classes.fullList]: anchor === "top" || anchor === "bottom",})}
  role="presentation"
  onClick={toggleDrawer(anchor,false)}
  onKeyDown={toggleDrawer(anchor,false)}
>
  <List>
    <ListItem button key={"About"}>
      <ListItemIcon>
        <InBoxIcon />
      </ListItemIcon>
      <ListItemText primary={"About"} />
    </ListItem>

    <ListItem button onClick={props.logoutHandler} key={"logout"}>
      <ListItemIcon>
        <MailIcon />
      </ListItemIcon>
      <ListItemText primary={"logout"} />
    </ListItem>

    <Link to="https://www.linkedin.com/in/faisal-malik-93ab29167/">
      <ListItem button key={"LinkedIn"}>
        <ListItemIcon>
          <LinkedInIcon />
        </ListItemIcon>
        <ListItemText primary={"LinkedIn"} />
      </ListItem>
    </Link>
  </List>
  <Divider />
  <List>
    {["All mail","Trash","Spam"].map((text,index) => (
      <ListItem button key={text}>
        <ListItemIcon>
          {index % 2 === 0 ? <InBoxIcon /> : <MailIcon />}
        </ListItemIcon>
        <ListItemText primary={text} />
      </ListItem>
    ))}
  </List>
  </div>
  );
 var anchor = "right";
 return (
   <div>
  <React.Fragment key={anchor}>
    <Button onClick={toggleDrawer(anchor,true)}>
      <MenuIcon />
    </Button>
    <Drawer
      anchor={anchor}
      open={state[anchor]}
      onClose={toggleDrawer(anchor,false)}
    >
      {list(anchor)}
    </Drawer>
  </React.Fragment>
  </div>
  );
}

export default RightDrawer;

解决方法

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

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

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