为什么我导航的页面会触发加载？

Question

我正在为我的 Web 应用程序使用 Next.js 13，它具有应用程序路由。我面临的问题是，当我从 /projects 页面导航到 /projects/:id/edit 页面时，它首先触发 /projects 页面的加载事件，然后触发 /projects/:id/edit 页面的加载事件。但是，我想修复此问题，以便仅触发 /projects/:id/edit 页面的加载事件。如何实现？

这是我的项目的文件夹结构：

- projects
  - loading.tsx
  - page.tsx
  - [id]
    - edit
      - loading.tsx
      - page.tsx

这就是我当前从 /projects 页面导航到 /projects/:id/edit 页面的方式：

<Link href={`projects/${project.id}/edit`}>
  <Button type="button">Edit</Button>
</Link>

Answer 1

实现此目的的方法是更改根，以便两个组件不共享它：

- projects
  - (notshared) <- name your directory with ( )
     - loading.tsx
     - page.tsx
  - [id]
    - edit
      - loading.tsx
      - page.tsx

更多信息可以在官方页面找到： https://nextjs.org/docs/app/building-your-application/routing/route-groups