链接不适用于 Next.js 和 Github 页面

Question

我最近学习了一个关于使用 React 和 Next.js 构建单页作品集的教程，并且在本地开发中一切正常运行。

但是，当我将其部署到 Github 页面时，内部链接停止工作。

    <PrefixedLink href="#about">
      <NavLink>About Me</NavLink>
    </PrefixedLink>

我尝试了以下在线提供的建议：添加一个 next.config.js（这确实修复了从 public 文件夹加载图像）——我的看起来像这样：

const pathPrefix = process.env.NODE_ENV === 'production'
? '/React-Portfolio'
: '';

module.exports = {
    assetPrefix: pathPrefix,
    basepatch: "/React-Portfolio",
    env: {
        pathPrefix,
    },
};

还有建议为所有链接添加前缀，因为 github 页面在路径中有项目名称，所以我有这个：

import Link from 'next/link';

const PrefixedLink = ({ href, as = href, children, ...props }) => (
    <Link
        href={href}
        as={`${process.env.pathPrefix}${as}`}
        {...props}
    >
        {children}
    </Link>
);

export default PrefixedLink;

但这也行不通。

在生产现场最终结果如下：

<a class="HeaderStyles__NavLink-sc-9w0vkp-5 jlNUaI">About Me</a>

没有任何 href="#about"，但如果我通过检查器手动添加它，它工作正常。

编辑删除并将 href 添加到 NavLink（自定义标签）解决了这个问题。

Answer 1

去掉并将 href 添加到 NavLink（自定义标签）解决了这个问题。

链接不适用于 Next.js 和 Github 页面

Links don't work with Next.js and Github Pages

javascript

hyperlink

github-pages

reactjs

next.js