Навигация по страницам в Gatsby

Amber

1 год назад

Если вы уже изучили основы работы с Gatsby и знаете, с чего начинается создание статического веб-сайта, вы можете приступать к изучению некоторых его внутренних компонентов. В этом материале мы поговорим о компоненте Link, который является оболочкой для компонента Link из Reach Router (его Gatsby использует для внутренней маршрутизации).

Читайте также: Как генерировать страницы из Markdown в Gatsby

Компонент Link используется для навигации между внутренними страницами сайта Gatsby вместо обычных тегов привязки (a). Преимущества использования Link следующие:

Gatsby пререндерит контент, на который есть ссылки.
На страницу, на которую есть ссылка, можно передать состояние.
Когда ссылке соответствует активная страница, к ссылке можно добавить пользовательский стиль или класс.
С помощью компонента Link можно управлять объектом истории браузера (это более продвинутый вариант использования).

Как работает компонент <Link />

Использовать компонент Link просто. Импортируйте его и используйте с параметром to, который должен указывать на относительный путь на сайте:

import React from 'react';
import { Link } from 'gatsby';

const AuthorCard = ({ author }) => {
  return (
    <div>
      <img src={author.avatar.children[0].fixed.src} alt={author.name} />
      <p>
        <Link to={`/author/${author.id}/`}>More posts</Link>
      </p>
    </div>
  );
};

export default AuthorCard;

Также можно передать любое свойство, которое вы обычно используете в теге привязки. Для примера давайте добавим к нашей ссылке заголовок, свойство title:

<Link
  to={`/author/${author.id}/`}
  title={`View all posts by ${author.name}`}
> 
  More posts
</Link>

Примечание: Чтобы сослаться на внешний домен или на другой сайт, не относящийся к Gatsby, в том же домене, используйте обычные теги привязки.

Ссылки на активной странице

На активной странице ссылки можно стилизовать при помощи объекта style или имени класса. В объекте style используйте свойство activeStyle:

<Link
  to={`/about/`}
  activeStyle={{ textDecoration: "salmon double underline" }}
> 
  About Us
</Link>

Вместо этого можно использовать имя класса. Для этого укажите свойство activeClassName:

<Link to={`/about/`} activeClassName="active">
  About Us
</Link>

Ссылка на главную страницу

Чтобы сослаться на домашнюю страницу, просто используйте / в качестве значения свойства to:

Передача состояния

Компонент Link также принимает свойство состояния state. С его помощью принимающая страница будет иметь доступ к содержимому свойства через свойство location (по адресу location.state):

<Link to="/" state={{returningVisitor: true}}>
  Go home
</Link>

Программная ссылка с помощью navigate

Если вы хотите использовать функциональные возможности компонента Link, но это нужно делать программно и вне разметки JSX, вы можете использовать вспомогательную функцию navigate:

import React from 'react';
import { navigate } from 'gatsby';

handleSubmit = e => {
  e.preventDefault();
  const form = e.target;

  // ...do stuff here to submit the form data
  // (e.g.: using the fetch API)

  // Then navigate to the path that corresponds to the form's
  // action attribute
  navigate(form.getAttribute('action');
};

Функция navigate принимает второй опциональный аргумент – это объект, в котором вы можете задать свойство state и/или указать, нужно ли заменить историю браузера.

navigate(form.getAttribute('action', {
  state: { message: 'Thanks a bunch!' },
  replace: true
});

Вспомогательные методы withPrefix и pathPrefix

Если ваш рабочий сайт размещен в подкаталоге, вам нужно установить значение pathPrefix в файле gatsby-config.js вашего сайта. Таким образом, Gatsby сможет правильно построить URL-адреса для скрытых ссылок, и все будет работать как в локальной разработке, так и в среде производства.

Кроме того, вы можете использовать вспомогательный метод withPrefix, чтобы вручную добавить префикс сайта. Это полезно, если вам требуются абсолютные пути.

import React from 'react';
import Helmet from 'react-helmet';
import { withPrefix } from 'gatsby';

const Index = props => {
  return (
    <>
      <Helmet>
        <link rel="icon" sizes="32x32" href={withPrefix('favicon-32x32.png')} />
        <link rel="icon" sizes="192x192" href={withPrefix('favicon-192x192.png')} />
        {/* More stuff here... */}
      </Helmet>

      <div className={props.className}>
        {props.children}
      </div>
    </>
  );
};

export default Index;

Заключение

Теперь вы умеете вставлять ссылки на свой сайт Gatsby. Для более подробного ознакомления с компонентом Link обратитесь к официальной документации.