Страницы и маршруты

В Astro нет файла с описанием маршрутов. Маршрут — соответствие адреса и страницы — задаёт сам файл: его путь внутри src/pages/ становится адресом сайта. Такой подход называют маршрутизацией на основе файлов.

Новая страница

Создайте файл src/pages/about.astro:

---
const author = 'Анна';
---
 
<html lang="ru">
  <head>
    <meta charset="utf-8" />
    <title>Обо мне</title>
  </head>
  <body>
    <h1>Обо мне</h1>
    <p>Меня зовут {author}, я пишу о веб-разработке.</p>
  </body>
</html>

Откройте http://localhost:4321/about — появится страница «Обо мне». Перезапускать сервер не нужно.

Как файлы становятся адресами

Файл index отвечает за адрес своей папки. Страницами могут быть не только .astro, но и .md и .mdx — о них отдельный урок.

Ссылки между страницами

Специального компонента для ссылок нет — пишите обычный тег <a>. Добавьте в src/pages/index.astro:

<nav>
  <a href="/">Главная</a>
  <a href="/posts">Статьи</a>
  <a href="/about">Обо мне</a>
</nav>

Клик по ссылке загружает новую страницу целиком, как на обычном сайте из HTML-файлов. Плавные переходы без перезагрузки можно включить позже — это урок о переходах между страницами.

Страница 404

Создайте src/pages/404.astro:

<html lang="ru">
  <head>
    <meta charset="utf-8" />
    <title>Страница не найдена</title>
  </head>
  <body>
    <h1>Страница не найдена</h1>
    <a href="/">На главную</a>
  </body>
</html>

Откройте любой несуществующий адрес, например http://localhost:4321/nothing, — появится эта страница. При сборке из неё получится файл 404.html, который хостинги показывают для неизвестных адресов.

Что не становится страницей

Файлы, чьё имя начинается с подчёркивания, например src/pages/_draft.astro, Astro пропускает. Компоненты и макеты держат вне src/pages/ — в src/components/ и src/layouts/, иначе каждый из них получит собственный адрес.

Частая ошибка

Компонент Header.astro кладут в src/pages/, потому что «он же для страниц». После этого у компонента появляется собственный адрес, по которому открывается кусок разметки без оформления, а при сборке получается лишний HTML-файл. В src/pages/ должны лежать только файлы, которые являются отдельными страницами.