NextJS 错误消息 Failed prop type: prop `href` 期望在 `<Link>` 中有一个 `string` 或 `object`，但得到了 `undefined`答案

【问题标题】：NextJS error message Failed prop type: The prop `href` expects a `string` or `object` in `<Link>`, but got `undefined` insteadNextJS 错误消息 Failed prop type: prop `href` 期望在 `<Link>` 中有一个 `string` 或 `object`，但得到了 `undefined`
【发布时间】：2021-10-07 22:31:45
【问题描述】：

我正在尝试在我的项目中实现 Layout 的标题

“错误：失败的道具类型：道具href 在<Link> 中需要string 或object，但得到了undefined。打开浏览器的控制台以查看组件堆栈跟踪。” 你能指导我做错什么吗？

import {
  Box,
  Button,
  Divider,
  List,
  ListItem,
  ListItemText,
  Menu,
  MenuItem
} from '@material-ui/core';
import { useRef, useState } from 'react';
import { useTranslation } from 'react-i18next';

import Link from 'next/link';
import { styled } from '@material-ui/core/styles';
import ExpandMoreTwoToneIcon from '@material-ui/icons/ExpandMoreTwoTone';

const ListWrapper = styled(Box)(
  ({ theme }) => `
        .MuiTouchRipple-root {
            display: none;
        }
        
        .MuiListItem-root {
            transition: ${theme.transitions.create(['color', 'fill'])};
            
            &.MuiListItem-indicators {
                padding: ${theme.spacing(1, 2)};
            
                .MuiListItemText-root {
                    .MuiTypography-root {
                        &:before {
                            height: 4px;
                            width: 22px;
                            opacity: 0;
                            visibility: hidden;
                            display: block;
                            position: absolute;
                            bottom: -10px;
                            transition: all .2s;
                            border-radius: ${theme.general.borderRadiusLg};
                            content: "";
                            background: ${theme.colors.primary.main};
                        }
                    }
                }

                &.active,
                &:active,
                &:hover {
                
                    background: transparent;
                
                    .MuiListItemText-root {
                        .MuiTypography-root {
                            &:before {
                                opacity: 1;
                                visibility: visible;
                                bottom: 0px;
                            }
                        }
                    }
                }
            }
        }
`
);

function HeaderMenu() {
  const { t } = useTranslation();

  const ref = useRef(null);
  const [isOpen, setOpen] = useState(false);

  const handleOpen = () => {
    setOpen(true);
  };

  const handleClose = () => {
    setOpen(false);
  };

  return (
    <>
      <ListWrapper>
        <List component={Box} display="flex">
          <ListItem
            classes={{ root: 'MuiListItem-indicators' }}
            button
            component={Link}
            to="/preview/management/users/list"
          >
            <ListItemText
              primaryTypographyProps={{ noWrap: true }}
              primary={t('Users')}
            />
          </ListItem>
          <ListItem
            classes={{ root: 'MuiListItem-indicators' }}
            button
            component={Link}
            to="/preview/dashboards/banking"
          >
            <ListItemText
              primaryTypographyProps={{ noWrap: true }}
              primary={t('Banking')}
            />
          </ListItem>
          <ListItem
            classes={{ root: 'MuiListItem-indicators' }}
            button
            ref={ref}
            onClick={handleOpen}
          >
            <ListItemText
              primaryTypographyProps={{ noWrap: true }}
              primary={
                <Box display="flex" alignItems="center">
                  {t('Help')}
                  <Box display="flex" alignItems="center" pl={0.3}>
                    <ExpandMoreTwoToneIcon fontSize="small" />
                  </Box>
                </Box>
              }
            />
          </ListItem>
        </List>
      </ListWrapper>
      <Menu anchorEl={ref.current} onClose={handleClose} open={isOpen}>
        <MenuItem component={Link} to="/overview">
          {t('Features tour')}
        </MenuItem>
        <MenuItem component={Link} to="/docs/introduction">
          {t('Getting started guide')}
        </MenuItem>
        <MenuItem component={Link} to="/docs/contact-support">
          {t('Contact support')}
        </MenuItem>
        <Divider sx={{ my: 1.5 }} />
        <Button
          variant="contained"
          fullWidth
          href="https://material-ui.com/store/items/tokyo-react-admin-dashboard"
          target="_blank"
          rel="noopener"
        >
          {t('Buy now')}
        </Button>
      </Menu>
    </>
  );
}

export default HeaderMenu;

【问题讨论】：

尝试使用 href 而不是

标签： reactjs next.js

【解决方案1】：

您只需将to 更改为href，因为来自'next/link' 的Link 仅接收道具href：

<ListItem
  classes={{ root: "MuiListItem-indicators" }}
  button
  component={Link}
  href="/preview/management/users/list"
>...</ListItem>

【讨论】：

【解决方案2】：

npm i react-router-dom 现在在 js 文件中从 react-router-dom 导入 {Link)；

即首页

【讨论】：