Gatsby и маршрутизация

Gatsby построен на основе React, поэтому для организации навигации между страницами можно использовать стандартные возможности React Router. Однако Gatsby имеет собственный подход к маршрутизации, основанный на файловой системе, который стоит понимать перед интеграцией React Router.

В Gatsby каждая страница проекта обычно создаётся через файловую структуру src/pages. Файл src/pages/about.js автоматически превращается в маршрут /about. Это файлово-ориентированная маршрутизация, которая работает без явного конфигурирования роутеров.

Gatsby предоставляет компонент Link из пакета gatsby для навигации между страницами. Его использование предпочтительно, так как он поддерживает prefetching, загружая данные целевой страницы заранее.

Пример использования:

import { Link } from "gatsby";

const Navbar = () => (
  <nav>
    <Link to="/">Главная</Link>
    <Link to="/about">О нас</Link>
    <Link to="/contact">Контакты</Link>
  </nav>
);

export default Navbar;

Ключевые моменты:

  • to определяет путь маршрута.
  • Предзагрузка (prefetch) ускоряет переход между страницами.
  • Использовать обычные <a> теги для внутренних ссылок не рекомендуется — это вызывает полную перезагрузку страницы.

Динамические маршруты и использование createPages

Для создания динамических маршрутов в Gatsby применяется функция createPages в gatsby-node.js. Это особенно актуально для страниц с контентом из CMS или Markdown.

Пример:

exports.createPages = async ({ actions, graphql }) => {
  const { createPage } = actions;

  const result = await graphql(`
    query {
      allMarkdownRemark {
        nodes {
          frontmatter {
            slug
          }
        }
      }
    }
  `);

  result.data.allMarkdownRemark.nodes.forEach(node => {
    createPage({
      path: `/blog/${node.frontmatter.slug}`,
      component: require.resolve(`./src/templates/blog-post.js`),
      context: { slug: node.frontmatter.slug },
    });
  });
};

Объяснение:

  • createPage создаёт страницу по указанному пути.
  • component — шаблон страницы, который используется для рендеринга.
  • context передаёт данные в компонент через GraphQL-запрос.

Интеграция React Router

В стандартных проектах Gatsby использование React Router напрямую не требуется, но в случаях, когда нужен сложный контроль навигации, можно подключить react-router-dom.

Пример базовой интеграции:

import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
import Home from "./pages/Home";
import About from "./pages/About";

const App = () => (
  <Router>
    <Routes>
      <Route path="/" element={<Home />} />
      <Route path="/about" element={<About />} />
    </Routes>
  </Router>
);

export default App;

Особенности:

  • BrowserRouter не подходит для серверного рендеринга Gatsby. Для SSR используется StaticRouter.
  • React Router лучше применять в пределах отдельных частей приложения, например, при вложенных интерфейсах, где маршрутизация Gatsby не предоставляет гибких возможностей.

Вложенная маршрутизация и Layout-компоненты

В Gatsby часто используют Layout-компоненты для общей структуры сайта. В React Router это аналогично использованию вложенных маршрутов.

Пример:

import { Outlet, Link } from "react-router-dom";

const DashboardLayout = () => (
  <div>
    <nav>
      <Link to="/dashboard">Главная</Link>
      <Link to="/dashboard/settings">Настройки</Link>
    </nav>
    <main>
      <Outlet />
    </main>
  </div>
);

export default DashboardLayout;
  • Outlet — место для рендеринга дочерних маршрутов.
  • В Gatsby такой подход позволяет комбинировать статическую маршрутизацию с динамическими частями интерфейса.

Обработка ошибок и несуществующих страниц

Для маршрутов, которые могут не существовать, Gatsby использует файл src/pages/404.js.

Пример страницы 404:

const NotFoundPage = () => (
  <div>
    <h1>Страница не найдена</h1>
    <p>Перейдите на <Link to="/">Главную</Link></p>
  </div>
);

export default NotFoundPage;

При использовании React Router добавляется маршрут *, который обрабатывает все неопределённые пути:

<Route path="*" element={<NotFoundPage />} />

Заключение по комбинации Gatsby и React Router

  • Gatsby автоматически обрабатывает маршрутизацию через файловую систему.
  • Link из Gatsby предпочтителен для внутренних переходов.
  • React Router подключается для сложных сценариев, вложенных маршрутов или динамических интерфейсов.
  • Для динамических страниц Gatsby предоставляет API createPages, что делает интеграцию гибкой и расширяемой.
  • Ошибки маршрутизации обрабатываются через 404-страницы и специальные маршруты в React Router при необходимости.

Эта структура позволяет строить эффективные и быстрые приложения, используя преимущества статической генерации Gatsby и гибкость маршрутизации React Router одновременно.

Оглавление