Next.js 13 App Router页面路由异常问题求助

核心排查与修复步骤： #

• 验证文件结构：确认whatshop文件夹直接放置在app目录下，路径为app/whatshop/page.jsx——这是App Router对应/whatshop路由的标准结构，文件夹名即为路由路径，内部必须包含page.jsx作为页面入口文件。

• 检查根布局逻辑：打开app/layout.jsx，确保它仅包含全站共享的UI元素（比如导航栏、页脚），并通过{children}渲染当前路由的页面内容。如果你的layout.jsx里直接写了首页的项目列表等内容，所有子路由的页面都会叠加在这些内容下方，就会出现你遇到的问题。正确的根布局示例：

import './globals.css';

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>
        {/* 这里放共享导航、页脚等全局元素 */}
        <nav>...</nav>
        {children} {/* 当前路由页面的渲染入口 */}
        <footer>...</footer>
      </body>
    </html>
  );
}

• 修复组件跳转逻辑：你的ProjectItem组件必须使用Next.js的Link组件生成跳转链接，确保是客户端路由跳转。组件内部代码应类似：

import Link from 'next/link';

export default function ProjectItem({ title, tech, backgroundIMG, projectURL }) {
  return (
    <Link href={projectURL}>
      <div className="project-item" style={{ backgroundImage: `url(${backgroundIMG})` }}>
        <h3>{title}</h3>
        <p>{tech}</p>
      </div>
    </Link>
  );
}

避免使用普通<a>标签，否则可能引发不符合预期的页面渲染问题。

• 隔离首页内容：确保首页的项目列表等内容仅放在app/page.jsx中，该文件仅在访问根路径/时渲染，不会影响其他路由页面。

排查优先级： #

先检查layout.jsx的结构（这是最易导致页面叠加的原因），再验证文件路径是否合规，最后确认组件的链接实现。

内容的提问来源于stack exchange，提问作者Brian Kekuhaupi'o Leithead