通过学习前面的app路由

我们知道，如果想实现类似上面的页面，其实非常简单, 我们只需按照要求创建下面的目录即可

.
└── app
    ├── favicon.ico
    ├── globals.css
    ├── layout.tsx
    ├── page.tsx
    └── products
        ├── 1
        │   └── page.tsx
        ├── 2
        │   └── page.tsx
        ├── 3
        │   └── page.tsx
        ├── 4
        │   └── page.tsx
        └── page.tsx

但是页面一旦增多，假如id为1000，甚至10000呢？显然这种徒手一个个创建文件夹的做法就不合适了，于是就有了动态路由的需求

在Next.js中，动态路由可以通过在app目录的相应位置使用方括号来创建特殊的文件名，例如[id]或[slug]，这些动态字段将作为参数传递给页面。

那么如何科学的实现上面的案例呢？

1，首先创建下面的目录结构

.
└── app
    ├── favicon.ico
    ├── globals.css
    ├── layout.tsx
    ├── page.tsx
    └── products
        ├── [id]
        │   └── page.tsx
        └── page.tsx

2，编辑 app/products/[id]/page.tsx:

export default function Product({ params }: { params: { id: number } }) {
    const { id } = params
    return (
        <div>
            <h1>Product {id}</h1>
            <p>This is the product page for product {id}</p>
        </div>
    )
}

3, 浏览器查看效果：