时间戳

首页 > 解决方案 > Next.js 中的动态页面不会链接回普通页面

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

问题描述

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

当我单击导航栏以返回标准页面（即主页、关于或联系人）时，问题就出现了。

应该链接到哪里，/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>
)}

标签： javascriptreactjsnext.js

解决方案

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

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

存在的问题是路由器将浏览器带到了about不/about，这显然会导致动态页面出现问题。

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

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

推荐阅读