Next.js 中的动态页面不会链接回普通页面

Question

我有一个用 next.js 创建的 web 站点，它有一个部分是动态路由，存储在文件夹pages/artists/[slug].js中，这很棒，我必须让整个动态路由工作得很好。

当我在导航栏中单击 go 回到标准页面，即主页、关于或联系人时，问题就出现了。

应该在哪里链接到/contact或/about它最终链接到/artists/contact或/artists/about

我应该如何解决这个问题？ 我似乎无法在网上找到有关此问题的任何信息。

谢谢

编辑：导航组件的代码

import {useState} from 'react'
import Link from 'next/link'
import config from '../../config'
export default function Menu() {
  const [menu, setMenu] = useState(false);
  const menuToggle = () => {
    setMenu(!menu),
      [menu, setMenu]

  }
  return (
    <>
      <a id="menubtn" onClick={menuToggle}>
        <svg width="40" height="40">
          <rect width="40" height="3" x="0" y="12"/>
          <rect width="40" height="3" x="0" y="24"/>
        </svg>
      </a>
      <nav id="menu">
        <a id="close" onClick={menuToggle}>&times;</a>
        <ul>
          {config.navigation.map((link) => (
            <li key={link}>
              <Link href={link}>
                <a onClick={menuToggle}>{link.charAt(0).toUpperCase() + link.slice(1)}</a>
              </Link>
            </li>
          ))}
        </ul>
      </nav>
)}

Answer 1

一些代码将有助于识别问题。 我现在只能说仔细检查您的链接标签。 确保您正在导入下一个/链接 package。

文档参考下一个/链接 - Next.js

Answer 2

发送后我仔细查看了代码，发现<Link> href 看起来像这样

<Link href={link}>
  <a onClick={menuToggle}>  {link.charAt(0).toUpperCase() + link.slice(1)}</a>
</Link>

问题是路由器将浏览器带到about not /about这显然会导致动态页面出现问题。

我将代码更新为此修复了它

<Link href={`/${link}`}>
  <a onClick={menuToggle}>{link.charAt(0).toUpperCase() + link.slice(1)}</a>
</Link>