时间戳

首页 > 解决方案 > gatsby 链接正在使用当前地址而不是使用根地址

javascript - gatsby 链接正在使用当前地址而不是使用根地址

问题描述

我想做一些分页，但我不知道为什么我的 gatsby 链接会自动添加当前地址，然后添加to={}.

想象它是这样的：

我想page2从page1. 所以，我将使用Link to={page1} 链接应该是 localhost:8000/page1 而不是我得到的是 localhost:8000/page2/page1

这是实际的代码。在pagetemplate.js：

export default function Program({ pageContext, data }) {
      const post = data.cockpitProgram
      const { previous, next } =  pageContext

    {previous && ( 

    <Link to={previous.title.slug} rel="prev"
    
    // className={ navLinkPrev}
    >
        <div
        //  className={ navPrev}
        >      
            <h3
            style={{margin:0,
            fontSize:"1em"}}
            >
                {previous.title.value}
            </h3> 
        </div>
        <div 
        // className={ navMobilePrev}
        >
            <FontAwesomeIcon icon="chevron-circle-left"></FontAwesomeIcon>
        </div>
    </Link>
    )}

在gatsby-node.js：

const pages = res.data.allCockpitProgram.edges
        pages.forEach(( post,index ) => {
          createPage({
            path: `/${post.node.title.slug}/`,
            component: program,
            context: {
              slug: post.node.title.slug,
              previous: index === 0 ? null : pages[index - 1].node,
              next: index === (pages.length - 1) ? null : pages[index + 1].node,
            },
          });
        })

标签： javascriptgatsby

解决方案

如果您没有/在开头设置斜杠 ( )，则它将路径作为相对路径。在示例中：Link to={page1}应该是Link to={/page1}.

您pageContext似乎工作正常，您正在获取上一页和下一页，但是，您没有正确设置<Link>'s 的目的地。

因此，在提供的代码中使用<Link to={`/${previous.title.slug}`} rel="prev">.

推荐阅读