现在我们已经了解了使用Gatsby](https://andsky.com/tech/tutorials/gatsbyjs-gatsby-first-steps)构建静态网站的基础知识，让我们开始探索它的一些内部原理。对于这篇文章，我将介绍Gatsby链接组件，它包装了Reach Router，]的下划线链接组件，Gatsby在内部使用该组件进行路由。
链接组件用于在Gatsby站点的内部页面之间导航，而不是使用常规的锚(a)标记。使用链接而不是常规锚点的好处如下：
- Gatsby将智能地预呈现链接到的内容
- 状态可以传递到链接到的页面
- 当活动页面与链接对应时，可以向链接添加自定义样式或自定义类。
- 这是一个更高级的用例，但浏览器的历史对象可以在使用
Link组件时进行控制。
使用
使用链接组件很简单，只需导入它并至少与to道具一起使用，该道具应该指向网站上的相对路径：
1import React from 'react';
2import { Link } from 'gatsby';
3
4const AuthorCard = ({ author }) => {
5 return (
6 <div>
7 <img src={author.avatar.children[0].fixed.src} alt={author.name} />
8 <p>
9 <Link to={`/author/${author.id}/`}>More posts</Link>
10 </p>
11 </div>
12 );
13};
14
15export default AuthorCard;
您还可以传递通常在锚标记上使用的任何道具。例如，让我们在链接中添加一个标题：
1<Link
2 to={`/author/${author.id}/`}
3 title={`View all posts by ${author.name}`}
4>
5 More posts
6</Link>
<$>[注意]当链接到外部域或同一域上的不同非Gatsby站点时，请使用常规锚标签。<$>
活动页面
您可以使用样式对象或类名以不同的方式设置活动页上链接的样式。对于Style对象，使用activeStyle道具：
1<Link
2 to={`/about/`}
3 activeStyle={{ textDecoration: "salmon double underline" }}
4>
5 About Us
6</Link>
如果要使用类名，请指定一个activeClassName属性：
1<Link to={`/about/`} activeClassName="active">
2 About Us
3</Link>
首页链接
要指向首页，只需使用/作为to道具的值：
1<Link to="/">Go home</Link>
传入状态
Link组件还接受state道具，接收页面将访问通过Location pro传入该道具的内容，位于Location.state：
1<Link to="/" state={{returningVisitor: true}}>
2 Go home
3</Link>
使用Navigate编程链接
当您需要使用Link组件的功能，但必须在JSX标记之外以编程方式实现时，您可以使用Navigate助手函数：
1import React from 'react';
2import { navigate } from 'gatsby';
3
4handleSubmit = e => {
5 e.preventDefault();
6 const form = e.target;
7
8 // ...do stuff here to submit the form data
9 // (e.g.: using the fetch API)
10
11 // Then navigate to the path that corresponds to the form's
12 // action attribute
13 navigate(form.getAttribute('action');
14};
Navigate带一个可选的第二个参数，它应该是一个对象，可以在其中指定state传入和/或是否需要替换浏览器历史：
1navigate(form.getAttribute('action', {
2 state: { message: 'Thanks a bunch!' },
3 replace: true
4});
带前缀路径前缀`
如果您的生产站点托管在子目录中，则需要在站点的gatsby-config.js文件中为pathPrefix设置一个值。通过这种方式，Gatsby将正确地构建链接到幕后的URL，并且在开发和生产时都可以在本地工作。
您也可以使用with Prefixhelper方法手动添加站点的前缀。在需要绝对路径的情况下，这会很有用：
1import React from 'react';
2import Helmet from 'react-helmet';
3import { withPrefix } from 'gatsby';
4
5const Index = props => {
6 return (
7 <>
8 <Helmet>
9 <link rel="icon" sizes="32x32" href={withPrefix('favicon-32x32.png')} />
10 <link rel="icon" sizes="192x192" href={withPrefix('favicon-192x192.png')} />
11 {/* More stuff here... */}
12 </Helmet>
13
14 <div className={props.className}>
15 {props.children}
16 </div>
17 </>
18 );
19};
20
21export default Index;
🔗现在您可以继续并开始链接到所有内容！要更深入地了解盖茨比的`Link‘组件，请访问官方documentation.