Scott

Next.js 14 Tutorial - 5 - Nested Dynamic Routes a year ago

nextjs
675个字符
共有173人围观

现在我们把难度升级 - 动态路由嵌套动态路由

除了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, 浏览器测试