Next.js 14 Tutorial - 5 - Nested Dynamic Routes a year ago
现在我们把难度升级 - 动态路由嵌套动态路由
除了productId是动态的,reviewId也是动态的
原理还是一样的
1, 要实现上面的页面,我们需要创建以下目录结构:
.
└── app
├── favicon.ico
├── globals.css
├── layout.tsx
├── page.tsx
└── products
├── [id]
│ ├── page.tsx
│ └── reviews
│ └── [reviewId]
│ └── page.tsx
└── page.tsx
2, 接着编辑app/products/[id]/reviews/[reviewId]/page.tsx
:
export default function Product({ params }: { params: { id: number, reviewId: number } }) {
const { id, reviewId } = params
return (
<div>
<p>Review {reviewId} for product {id} </p>
</div>
)
}
3, 浏览器测试