Next.js中如何实现/campaigns/[哈希]/pearks路径的Link导航？

问题根源 #

当前你的pages目录结构中，pearks是根目录下的独立页面，和campaigns同级，但你期望的路径/campaigns/<哈希值>/pearks对应的是campaigns/[show]子目录下的pearks页面，目录结构不匹配导致路由找不到对应页面，触发404。

解决方案 #

1. 调整pages目录结构 #

按照Next.js文件系统路由规则，创建对应层级的目录：

pages
    |_campaigns
        |_[show].tsx  // 原campaign详情页
        |_[show]
            |_pearks
                |_index.tsx  // 对应/campaigns/<哈希值>/pearks的页面

2. 修改Link组件写法 #

两种可行的写法：

写法一：使用路由对象

<Link
  href={{
    pathname: '/campaigns/[show]/pearks',
    query: { show: this.props.address },
  }}
>
  View Pearks
</Link>

写法二：直接拼接字符串路径（更简洁）

<Link href={`/campaigns/${this.props.address}/pearks`}>
  View Pearks
</Link>

为什么原写法出错？ #

你使用了/campaigns/[[...show]]/pearks的pathname，但你的项目中并没有对应的目录结构，且[[...show]]是可选catch-all路由，用于匹配任意层级的路径片段，这里完全不需要用它，反而会让Next.js找不到正确的页面文件。

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