Динамические маршруты
Когда вы не знаете точные названия сегментов заранее и хотите создавать маршруты из динамических данных, вы можете использовать динамические сегменты, которые заполняются во время запроса или пререндерятся во время сборки.
Соглашение
Динамический сегмент создается путем заключения имени файла или папки в квадратные скобки: [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 | { slug: undefined } |
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'] } |