javascript - Gatsbyjs 和内部链接

Question

我正在用 gatsbyjs 构建一个站点。就seo而言，我认为“onClick”是不可抓取的。所以也许有人可以帮助我。

我有这个:

render={data => (
        <div className='feed'>
            {data.allContentfulBlog.edges.map(edge => (
                <div key={edge.node.id} className='card'
                style={{
                    backgroundImage: `linear-gradient(
                    to bottom, 
                    rgba(10,10,10,0) 0%,
                    rgba(10,10,10,0) 50%,
                    rgba(10,10,10,0.7) 100%),
                    url(${edge.node.featuredImage.fluid.src})`
                }}
            onClick={() => navigate(`/blog/${edge.node.slug}`)} >
            {edge.node.category.map(category => (
                <p className='card__category'>{category.title}</p>
            ))}
            <p className='card__title'>{edge.node.title}</p>
            </div>
            ))}
        </div>
     )}

第一个问题:那么我怎样才能删除 <a href=''></a> 的“onClick”呢？

我在 slug 中需要“${edge.node.slug}”，我试过了，但我不知道如何正确调用它。

第二个问题:是否可以传递 slug 中的类别？

示例:example.com/travel/how-to-travel

现在我有:example.com/blog/how-to-travel ( /blog/${edge.node.slug} )

我尝试了很多东西但是...我做不到。

谢谢

********************更新*********************

render={data => (
        <div className='feed'>
            {data.allContentfulBlog.edges.map(edge => (
                <Link className='card' style={{
                  backgroundImage: `linear-gradient(
                  to bottom, 
                  rgba(10,10,10,0) 0%,
                  rgba(10,10,10,0) 50%,
                  rgba(10,10,10,0.7) 100%),
                  url(${edge.node.featuredImage.fluid.src})`
              }} to={`/blog/${edge.node.slug}`}>
            {edge.node.category.map(category => ( <p className='card__category'>{category.title}</p>  ))}
            <p className='card__title'>{edge.node.title}</p>
            </Link>
            ))}
        </div>
     )}

现在一切正常，但我有几个问题

1- 如果我输入 {edge.node.category.map(category => ( {category.title} ))} 不起作用，则“{category.title}”不起作用。为什么？

2-为什么我需要为类别写“{edge.node.category.map(category => (”，我不能直接使用“{category.title}”。

3- 我删除了“key={edge.node.id}”，函数是什么？

Answer 1

对于内部链接，为了能够利用 Gatsby 的预加载功能，您需要使用 Link 组件。

首先，你必须导入它:

import {Link} from "gatsby"

然后用这个 Link 组件包裹你想要点击的组件:

<Link to={edge.node.slug}>
   //Your component here
</Link>

对于您的第二个问题，您可以为您生成的每种类型的页面创建特定的路由，例如/blog 或您想要的任何内容。为此，您必须在 gatsby-node.js 中定义路径。

这是一个如何执行此操作的示例:

// Create blog posts pages.
  const posts = result.data.postsRemark.edges

  posts.forEach((post, index) => {
    createPage({
      path: `/blog/${post.node.fields.slug}`,
      component: blogPostTemplate,
      context: {
        slug: post.node.fields.slug,

      },
    })
  })

您可以在官方 Gatsby 教程中找到更多信息:https://www.gatsbyjs.org/tutorial/part-seven/关于如何以编程方式生成页面。