Next.js 13 App Router页面内锚点链接失效问题求助

修正href路径写法 #

问题核心是单独写#targetDiv会被App路由解析为当前路径的子路径，导致URL多出斜杠。正确的写法是将锚点与当前完整路径拼接：

• 使用<Link>组件：

  <Link href="/about#targetDiv">跳转到目标区域</Link>
  

• 使用普通<a>标签：

  <a href="/about#targetDiv">跳转到目标区域</a>
  

配置滚动恢复行为 #

1. 在app/layout.js中显式引入ScrollRestoration组件，确保滚动状态被正确处理：

   import { ScrollRestoration } from 'next/app';
   
   export default function RootLayout({ children }) {
     return (
       <html lang="zh-CN">
         <body>
           {children}
           <ScrollRestoration />
         </body>
       </html>
     );
   }
   

2. 在next.config.js中启用滚动恢复配置：

   /** @type {import('next').NextConfig} */
   const nextConfig = {
     experimental: {
       appDir: true,
     },
     scrollRestoration: true,
   };
   
   module.exports = nextConfig;
   

验证目标元素ID #

确保页面中存在唯一的id="targetDiv"元素，无拼写错误或重复ID，这是锚点滚动生效的基础。

以上均为Next.js官方支持的原生处理方案，无需自定义滚动逻辑即可解决问题。

内容的提问来源于stack exchange，提问作者Rockafella96