Динамические маршруты
Когда вы не знаете точные названия сегментов заранее и хотите создавать маршруты из динамических данных, вы можете использовать динамические сегменты, которые заполняются во время запроса или пререндерятся во время сборки.
Соглашение
Динамический сегмент создается путем заключения имени файла или папки в квадратные скобки: [segmentName]. Например, [id] или [slug].
Доступ к динамическим сегментам можно получить через useRouter.
Пример
Например, блог может включать маршрут pages/blog/[slug].js, где [slug] — это динамический сегмент для постов блога.
import { useRouter } from 'next/router'
export default function Page() {
const router = useRouter()
return <p>Пост: {router.query.slug}</p>
}| Маршрут | Пример URL | params |
|---|---|---|
pages/blog/[slug].js | /blog/a | { slug: 'a' } |
pages/blog/[slug].js | /blog/b | { slug: 'b' } |
pages/blog/[slug].js | /blog/c | { slug: 'c' } |
Сегменты с перехватом всех параметров
Динамические сегменты могут быть расширены для перехвата всех последующих параметров путем добавления многоточия внутри скобок [...segmentName].
Например, pages/shop/[...slug].js будет соответствовать /shop/clothes, а также /shop/clothes/tops, /shop/clothes/tops/t-shirts и так далее.
| Маршрут | Пример URL | params |
|---|---|---|
pages/shop/[...slug].js | /shop/a | { slug: ['a'] } |
pages/shop/[...slug].js | /shop/a/b | { slug: ['a', 'b'] } |
pages/shop/[...slug].js | /shop/a/b/c | { slug: ['a', 'b', 'c'] } |
Опциональные сегменты с перехватом всех параметров
Сегменты с перехватом всех параметров могут быть сделаны опциональными путем включения параметра в двойные квадратные скобки: [[...segmentName]].
Например, pages/shop/[[...slug]].js будет также соответствовать /shop, в дополнение к /shop/clothes, /shop/clothes/tops, /shop/clothes/tops/t-shirts.
Разница между сегментами с перехватом всех параметров и опциональными сегментами с перехватом заключается в том, что с опциональными маршрут без параметра также будет соответствовать (/shop в примере выше).
| Маршрут | Пример URL | params |
|---|---|---|
pages/shop/[[...slug]].js | /shop | { slug: [] } |
pages/shop/[[...slug]].js | /shop/a | { slug: ['a'] } |
pages/shop/[[...slug]].js | /shop/a/b | { slug: ['a', 'b'] } |
pages/shop/[[...slug]].js | /shop/a/b/c | { slug: ['a', 'b', 'c'] } |