Динамические маршруты
Когда вы не знаете точные названия сегментов заранее и хотите создавать маршруты на основе динамических данных, вы можете использовать динамические сегменты, которые заполняются во время запроса или пререндерятся во время сборки.
Соглашение
Динамический сегмент создаётся путём заключения имени файла или папки в квадратные скобки: [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/clothes, /shop/clothes/tops, /shop/clothes/tops/t-shirts, но и /shop.
Разница между сегментами с перехватом всех значений и опциональными сегментами с перехватом всех значений заключается в том, что опциональные сегменты также соответствуют маршруту без параметра (как /shop в примере выше).
| Маршрут | Пример URL | params |
|---|---|---|
pages/shop/[[...slug]].js | /shop | {} |
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'] } |