小编iAm*_*Why的帖子

我现在想升级到 Next 13。我的投资组合上有不同的导航栏。如何为 /about 和 /skills 路由使用与主页和 /contact 路由不同的导航栏？

我认为您现在可以在应用程序目录中创建不同的子文件夹，每个子文件夹都包含layout.tsx 文件，但随后会创建相应的不需要的路由。

我尝试了以下文件结构：

/app/LayoutOne/layout.tsx
/app/LayoutOne/page.tsx
/app/LayoutOne/contact/page.tsx
/app/LayoutTwo/layout.tsx
/app/LayoutTwo/about/page.tsx
/app/LayoutTwo/skills/page.tsx

但后来我有以下路线：

../LayoutOne
../LayoutOne/contact
../LayoutTwo/about
../LayoutTwo/skills

我不想要 URL 中的布局部分

我想链接单个页面上的不同部分。我已经看到了这个问题，但它对我不起作用。下面我创建了一个演示，它对于我的两次尝试来说尽可能清晰：

第一次尝试：

app/layout.tsx:

<Link href="#home" scroll={false}> Home </Link>
<Link href="#about" scroll={false}> About </Link>


app/page.tsx:

<section id="home" className="min-h-screen">home</section>
<section id="about" className="min-h-screen">about</section>

当我尝试单击链接时，我在浏览器中运行的开发人员中看到以下错误：

第二次尝试：

我在链接中添加了斜杠，以引用主页的路线

app/layout.tsx:

<Link href="/#home" scroll={false}> Home </Link>
<Link href="/#about" scroll={false}> About </Link>


app/page.tsx:

<section id="home" className="min-h-screen">home</section>
<section id="about" className="min-h-screen">about</section>

现在，浏览器会跳转到两个链接的页面顶部，即主页部分。对于“关于”链接，它当然也应该滚动到适当的部分。

编辑 2022 年 12 月 4 日：

它似乎与 Next 的链接组件有关，因为当我用 F12 打开开发人员工具并单击从链接组件生成的 a 标签中的链接时，滚动到各个部分就可以了。