NextJS 13 App Router URL路径问题求助：简化商品详情页URL

要实现点击链接后URL从localhost:3000/products/car变为localhost:3000/car，只需两步操作：

1. 调整路由目录结构 #

Next.js 13 App Router的路由规则是目录结构直接映射URL路径，所以需要把[slug]目录从products子目录下移动到app根目录下。修改后的目录结构如下：

app
    [slug]
        page.tsx
    products  // 若需保留产品列表页可继续保留，否则可删除
        page.tsx
components
    ProductCard.tsx

2. 修改Link组件的跳转路径 #

在ProductCard.tsx中，把Link的href值从带/products前缀的路径改成直接以/开头的slug路径：

// ProductCard.tsx

return (
    <div>
        <Link href={`/${prod.slug}`}>查看产品</Link> {/* 补充链接文本，避免空Link标签 */}
    </div>
)

完成以上修改后，点击链接就会跳转到localhost:3000/car这类根路径下的URL了。

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