使用Gatsby链接组件在页面之间导航

现在我们已经了解了使用 Gatsby 构建静态网站的基础知识，让我们开始探索它的一些内部结构。在这篇文章中，我将介绍 Gatsby Link 组件，它包装了 Reach Router 的下划线 Link 组件，Gatsby 在内部使用该组件进行路由。

Link 组件用于在 Gatsby 网站的内部页面之间导航，而不是使用常规锚 (a) 标签。使用 Link 而不是常规锚点的好处如下：

Gatsby 将智能地预呈现链接到的内容
可以将状态传递到链接到的页面
当活动页面与链接对应时，可以将自定义样式或自定义类添加到链接。
这是一个更高级的用例，但是在使用 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 站点时，请使用常规锚标记。

活动页面

您可以使用样式对象或类名对活动页面上的链接进行不同的样式设置。对于样式对象，使用 activeStyle 属性：

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

而要使用类名，请指定 activeClassName 属性：

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

链接到主页

要指向主页，只需使用 / 作为 to 属性的值：

<Link to="/">Go home</Link>

传入状态

Link 组件还接受 state 属性，并且接收页面将可以访问通过 location prop 传递到该属性的内容，在 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`

如果您的生产站点托管在子目录中，您需要在站点的 gatsby-config.js 文件中为 pathPrefix 设置一个值。这样，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 组件，请前往官方文档。