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>