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

gatsby

Now that we’ve been over the basics of working with Gatsby to build a static website, let’s start exploring some of its internals. For this post, I’ll cover the Gatsby Link component, which wraps the underlining Link component of Reach Router, which Gatsby uses internally for routing.

现在，我们已经了解了与盖茨比合作建立静态网站的基础知识 ，让我们开始探索其内部结构。 在本文中，我将介绍Gatsby Link组件，该组件包装了Reach Router的下划线Link组件，Gatsby在内部将其用于路由。

The Link component is used to navigate between internal pages of a Gatsby site instead of using regular anchor (a) tags. The benefits of using Link instead of a regular anchor are the following:

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

• Gatsby will intelligently prerender the linked-to content
  Gatsby将智能地呈现链接的内容
• State can be passed to the linked-to page
  状态可以传递到链接页面
• Custom styling or a custom class can be added to links when the active page corresponds with the link.
  当活动页面与链接相对应时，可以将自定义样式或自定义类添加到链接。

• This is a bit more of an advanced use case, but the browser’s history object can be controlled when using the Link component.

  这是高级用例的一部分，但是在使用Link组件时可以控制浏览器的历史记录对象。

使用<Link /> (Using <Link />)

Using the link component is simple, just import it and use it with at least the to prop, which should point to a relative path on the site:

使用链接组件很简单，只需将其导入并至少与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;

You can also pass in any prop that you’d normally use on an anchor tag. For example, let’s add a title to our link:

您还可以传入通常在锚标签上使用的任何道具。 例如，让我们为链接添加title ：

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

When linking to an external domain or to a different non-Gatsby site on the same domain, use regular anchor tags.

链接到外部域或同一域上的另一个非Gatsby站点时，请使用常规锚标记。

活动页面 (Active Page)

You can style links on the active page differently using either a style object or a class name. For a style object, use the activeStyle prop:

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

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

And to use a class name instead, specify an activeClassName prop:

而要使用类名，请指定一个activeClassName ：

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

链接到首页 (Linking to the Homepage)

To point to the homepage, just use / as the value for the to prop:

指向主页，只需用/作为价值to支撑：

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

传递状态 (Passing-in State)

The Link component also accepts a state prop, and the receiving page will have access to what’s passed into that prop via the location prop, at location.state:

Link组件还接受state道具，并且接收页面将可以通过location prop在location.state处访问传递给该道具的内容：

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

以编程方式与navigate链接 (Linking Programmatically with   navigate)

When you need to use the functionality of the Link component, but have to do so programmatically outside of JSX markup, you can use the navigate helper function:

当您需要使用Link组件的功能，但必须在JSX标记之外以编程方式使用它时，可以使用navigate helper函数：

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 takes an optional 2nd argument, which should be an object where you can specify state to pass-in and/or if the browser history should be replaced:

navigate带有一个可选的第二个参数，该参数应该是一个对象，您可以在其中指定传递state和/或是否应该替换浏览器历史记录：

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

withPrefix和pathPrefix (withPrefix   &   pathPrefix)

If your production site is hosted in a sub-directory, you’ll want to set a value for pathPrefix inside the site’s gatsby-config.js file. This way, Gatsby will correctly construct the URLs to link to behind the scenes and things will just work both locally when developing and in production.

如果您的生产站点位于一个子目录中，则需要在站点的gatsby-config.js文件内为pathPrefix设置一个值。 这样，盖茨比将正确地构建URL以链接到幕后，并且无论是在开发还是在生产中，事物都将在本地运行。

You can also make use of the withPrefix helper method to add the site’s prefix manually. This can be helpful where absolute paths are needed:

您还可以使用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;

 Now you can go ahead and start linking to all the things! For a more in-depth look at Gatsby’s Link component, head over to the official documentation.

现在您可以继续并开始链接所有内容！ 要进一步了解Gatsby的Link组件，请转至官方文档 。

翻译自: https://www.digitalocean.com/community/tutorials/gatsbyjs-gatsby-link

gatsby