Маршрутизация
Astro использует маршрутизацию на основе файлов для генерации URL-адресов ваших сборок на основе схемы расположения файлов в каталоге src/pages/
вашего проекта.
Навигация между страницами
Заголовок раздела Навигация между страницамиAstro использует стандартные HTML-элементы <a>
для навигации между маршрутами. Нет специфического для фреймворка компонента <Link>
.
Статические маршруты
Заголовок раздела Статические маршрутыКомпоненты страниц .astro
, а также Markdown и MDX файлы (.md
, .mdx
) в директории src/pages/
автоматически становятся страницами вашего сайта. Маршрут каждой страницы соответствует ее пути и имени файла в каталоге src/pages/
.
В проекте Astro нет отдельного “конфигурационного файла маршрутизации”! Когда вы добавляете файл в директорию src/pages/
, для вас автоматически создается новый маршрут. В статических сборках вы можете настроить формат вывода файлов с помощью опции build.format
.
Динамические маршруты
Заголовок раздела Динамические маршрутыВ имени файла страницы Astro могут быть указаны параметры динамического маршрута для создания нескольких подходящих страниц. Например, src/pages/authors/[author].astro
генерирует биографическую страницу для каждого автора в вашем блоге. author
становится параметром, к которому вы можете обращаться внутри страницы.
В стандартном режиме статического вывода Astro эти страницы генерируются во время сборки, поэтому вы должны заранее определить список авторов
, которые получат соответствующий файл. В режиме SSR страница будет генерироваться по запросу для любого маршрута, который соответствует.
Статический (SSG) режим
Заголовок раздела Статический (SSG) режимПоскольку все маршруты должны быть определены во время сборки, динамический маршрут должен экспортировать функцию getStaticPaths()
, которая возвращает массив объектов со свойством params
. Каждый из этих объектов будет генерировать соответствующий маршрут.
[dog].astro
определяет динамический параметр dog
в своем имени, поэтому объекты, возвращаемые getStaticPaths()
, должны включать dog
в свои params
. Затем страница может получить доступ к этому параметру с помощью Astro.params
.
В результате будут сгенерированы три страницы: /dogs/clifford
, /dogs/rover
и /dogs/spot
, каждая из которых отображает соответствующее имя собаки.
Имя файла может включать несколько параметров, которые должны быть включены в объекты params
в getStaticPaths()
:
В результате будут сгенерированы /en-v1/info
и /fr-v2/info
.
Параметры могут быть включены в отдельные части пути. Например, файл src/pages/[lang]/[version]/info.astro
с тем же getStaticPaths()
, что и выше, сгенерирует маршруты /en/v1/info
и /fr/v2/info
.
getStaticPaths()
.
Rest параметры
Заголовок раздела Rest параметрыЕсли вам нужна большая гибкость в маршрутизации URL, вы можете использовать rest параметры ([...path]
) в имени файла .astro
для сопоставления путей файлов любой глубины:
Это сгенерирует /sequences/one/two/three
, /sequences/four
и /sequences
. (Установка параметра rest в значение undefined
позволяет ему соответствовать странице верхнего уровня).
Параметры rest можно использовать с другими именованными параметрами. Например, просмотрщик файлов GitHub может быть представлен следующим динамическим маршрутом:
В этом примере запрос на /withastro/astro/tree/main/docs/public/favicon.svg
будет разбит на следующие именованные параметры:
Пример: Динамические страницы на нескольких уровнях
Заголовок раздела Пример: Динамические страницы на нескольких уровняхВ следующем примере параметр rest ([...slug]
) и функция props
в getStaticPaths()
генерируют страницы для слагов разной глубины.
Режим серверного рендеринга (SSR)
Заголовок раздела Режим серверного рендеринга (SSR)В режиме SSR динамические маршруты определяются точно так же: включите в имена файлов скобки [param]
или [...path]
для соответствия произвольным строкам или путям. Но поскольку маршруты больше не строятся заранее, страница будет обслуживаться по любому подходящему маршруту. Поскольку это не “статические” маршруты, getStaticPaths
не следует использовать.
Эта страница будет предоставлена для любого значения resource
и id
: resources/users/1
, resources/colors/blue
и т.д.
Модификация примера [...slug]
для SSR
Заголовок раздела Модификация примера [...slug] для SSRПоскольку страницы SSR не могут использовать getStaticPaths()
, они не могут получать props. Предыдущий пример может быть адаптирован для режима SSR путем поиска значения параметра slug
в объекте. Если маршрут находится в корне (”/”), параметр slug будет иметь значение undefined
. Если значение не существует в объекте, мы перенаправляем на страницу 404.
Переадресация
Заголовок раздела ПереадресацияИногда вам нужно перенаправить читателей на новую страницу, либо постоянно, потому что структура сайта изменилась, либо в ответ на действие, такое как вход в авторизованный маршрут.
Вы можете определить правила для перенаправления пользователей на постоянно перемещаемые страницы в конфигурации Astro. Или перенаправлять пользователей динамически по мере использования ими вашего сайта.
Настроенные переадресации
Заголовок раздела Настроенные переадресации
Добавлено в:
astro@2.9.0
Вы можете указать отображение постоянных переадресаций в конфигурации Astro с помощью значения redirects
. Для большинства переадресаций это сопоставление старого маршрута с новым маршрутом:
Эти переадресации подчиняются тем же правилам, что и маршруты на основе файлов. Динамические маршруты разрешены, если новый и старый маршруты содержат одинаковые параметры, например:
Используя SSR или статический адаптер, вы также можете предоставить объект в качестве значения, что позволит вам указать код ответа status
в дополнение к новому адресу destination
:
При запуске astro build
, Astro по умолчанию выводит HTML-файлы с тегом meta refresh. Поддерживаемые адаптеры вместо этого будут выводить конфигурационный файл хоста с переадресацией.
По умолчанию код состояния будет 301
. При сборке в HTML-файлы код состояния не используется сервером.
Динамические переадресации
Заголовок раздела Динамические переадресацииВ глобальном объекте Astro
метод Astro.redirect
позволяет динамически перенаправлять на другую страницу. Вы можете сделать это после проверки того, вошел ли пользователь в систему, получив его сессию из куки.
Порядок приоритетов маршрутов
Заголовок раздела Порядок приоритетов маршрутовВозможно, что несколько определенных маршрутов будут пытаться построить один и тот же путь URL. Например, все эти маршруты могут построить /posts/create
:
Директорияsrc/pages/
- […slug].astro
Директорияposts/
- create.astro
- [page].astro
- [pid].ts
- […slug].astro
Astro необходимо знать, какой маршрут должен быть использован для создания страницы. Для этого он сортирует их по порядку в соответствии со следующими правилами:
- Маршруты с большим количеством сегментов пути будут иметь приоритет перед менее специфичными маршрутами. В приведенном выше примере все маршруты в разделе
/posts/
имеют приоритет над корневым/[...slug].astro
. - Статические маршруты без параметров пути будут иметь приоритет над динамическими маршрутами. Например,
/posts/create.astro
имеет приоритет над всеми остальными маршрутами в примере. - Динамические маршруты с именованными параметрами имеют приоритет над остальными параметрами. Например,
/posts/[page].astro
имеет приоритет над/posts/[...slug].astro
. - Предрендеренные динамические маршруты имеют приоритет над серверными динамическими маршрутами.
- Эндпоинты имеют приоритет над страницами.
- Если ни одно из вышеперечисленных правил не определяет порядок, маршруты сортируются в алфавитном порядке на основе локали по умолчанию вашей установки Node.
Учитывая приведенный выше пример, вот несколько примеров того, как правила будут сопоставлять запрашиваемый URL с маршрутом, используемым для построения HTML:
pages/posts/create.astro
- Будет построено только/posts/create
.pages/posts/[pid].ts
- Будет построено/posts/abc
,/posts/xyz
и т.д. Но не/posts/create
.pages/posts/[page].astro
- Построит/posts/1
,/posts/2
и т.д. Но не/posts/create
,/posts/abc
и/posts/xyz
.pages/posts/[...slug].astro
- Будет создавать/posts/1/2
,/posts/a/b/c
и т.д. Но не/posts/create
,/posts/1
,/posts/abc
и т.д.pages/[...slug].astro
- Будет создавать/abc
,/xyz
,/abc/xyz
и т.д. Но не/posts/create
,/posts/1
,/posts/abc
, и т.д.
Пагинация
Заголовок раздела ПагинацияAstro поддерживает встроенную пагинацию для больших коллекций данных, которые необходимо разбить на несколько страниц. Astro генерирует общие свойства пагинации, включая URL предыдущей/следующей страницы, общее количество страниц и т.д.
Имена пагинационных маршрутов должны использовать тот же синтаксис [скобка]
, что и стандартные динамические маршруты. Например, имя файла /astronauts/[page].astro
будет генерировать маршруты для /astronauts/1
, /astronauts/2
и т. д., где [page]
- это номер генерируемой страницы.
Вы можете использовать функцию paginate()
для генерации этих страниц для массива значений следующим образом:
Это генерирует следующие страницы, по 2 элемента на странице:
/astronauts/1
- Страница 1: Отображает “Neil Armstrong” и “Buzz Aldrin”./astronauts/2
- Страница 2: отображает “Sally Ride” и “John Glenn”.
Свойство page
Заголовок раздела Свойство pageКогда вы используете функцию paginate()
, каждой странице будут переданы данные через пропс page
. Пропс page
имеет множество полезных свойств, но вот основные из них:
- page.data - массив, содержащий фрагмент данных страницы, который вы передали функции
paginate()
. - page.url.next - ссылка на следующую страницу в наборе
- page.url.prev - ссылка на предыдущую страницу в наборе
Полная справка по API
Заголовок раздела Полная справка по APIВложенная пагинация
Заголовок раздела Вложенная пагинацияБолее продвинутым вариантом использования пагинации является вложенная пагинация. Это когда пагинация сочетается с другими динамическими параметрами маршрута. Вы можете использовать вложенную пагинацию для группировки коллекции пагинаций по какому-либо свойству или тегу.
Например, если вы хотите сгруппировать посты в Markdown по какому-то тегу, вы можете использовать вложенную пагинацию, создав страницу /src/pages/[tag]/[page].astro
, которая будет соответствовать следующим URLS:
/red/1
(tag=red)/red/2
(tag=red)/blue/1
(tag=blue)/green/1
(tag=green)
Вложенная пагинация работает путем возврата массива результатов paginate()
из getStaticPaths()
, по одному для каждой группировки.
В следующем примере мы реализуем вложенную пагинацию для построения URL-адресов, перечисленных выше:
Исключение страниц
Заголовок раздела Исключение страницВы можете исключить страницы или каталоги из сборки, добавив к их именам символ подчеркивания (_
). Файлы с префиксом _
не будут распознаны маршрутизатором и не будут помещены в каталог dist/
.
Это можно использовать для временного отключения страниц, а также для размещения тестов, утилит и компонентов в той же папке, что и связанные с ними страницы.
В этом примере только src/pages/index.astro
и src/pages/posts/post1.md
будут построены как маршруты страниц и HTML-файлы.
Директорияsrc/pages/
Директория_hidden-directory/
- page1.md
- page2.md
- _hidden-page.astro
- index.astro
Директорияposts/
- _SomeComponent.astro
- _utils.js
- post1.md