现在我们已经了解了使用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 Prefix
helper方法手动添加站点的前缀。在需要绝对路径的情况下,这会很有用:
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.