盖茨比分页问题

Question

您好，我正在尝试使用 gatsby 和 MDX 构建一个分页博客，当我在主页上时，我的 URL 是“/”，当我点击我的 post 之一时s 然后 URL 将变为 '/slug' 并且一切正常但是当我转到第 2 页并且 URL 是 '/2' 并且我单击我的 posts 之一URL 变为 '/2/slug'（而不是 '/slug'），我无法访问我的 post，post 存在，如果我输入他的 slug，我可以访问在没有 '/2' 的 URL 中。在我创建分页的 gatsby-node 中，我只是将 slug 作为路径传递，所以当我单击 post

exports.createPages = async function ({ actions, graphql }) {
 const { data } = await graphql(`
   query {
     allMdx(sort: { fields: frontmatter___date, order: DESC }) {
       edges {
         node {
           frontmatter {
             slug
           }
           id
         }
       }
     }
   }
 `)

 const postPerPage = 3

 const numPages = Math.ceil(data.allMdx.edges.length / postPerPage)

 Array.from({ length: numPages }).forEach((_, i) => {
   actions.createPage({
     path: i === 0 ? `/` : `/${i + 1}`,
     component: require.resolve("./src/templates/allPosts.js"),
     context: {
       limit: postPerPage,
       skip: i * postPerPage,
       numPages,
       currentPage: i + 1,
     },
   })
 })

 data.allMdx.edges.forEach(edge => {
   const slug = edge.node.frontmatter.slug
   const id = edge.node.id
   actions.createPage({
     path: slug,
     component: require.resolve(`./src/templates/singlePost.js`),
     context: { id },
   })
 })
}

这就是我将 slug 作为道具传递给我的模板的方式

import React from "react"
import { ButtonWrapper } from "../elements"

export const Button = ({ children, href }) => {
  return <ButtonWrapper to={href}>{children}</ButtonWrapper>
}

import React from "react"
import { CardWrapper, P, H2 } from "../elements"
import { Button } from "../components"

export const ContentCard = ({ date, title, excerpt, slug }) => {
  return (
    <CardWrapper>
      <P size="xSmall" textAlign="center" margin="0 0 0.5rem 0" color="dark2">
        {date}
      </P>
      <H2 textAlign="center" margin="0 0 1rem 0">
        {title}
      </H2>
      <P size="small" color="dark2" textAlign="center" margin="0 0 1.5rem 0">
        {excerpt}
      </P>
      <Button href={slug}>Read More</Button>
    </CardWrapper>
  )
}

import React from "react"
import { graphql } from "gatsby"
import {
  Container,
  Content,
  ContentCard,
  FeatureImage,
  Pagination,
} from "../components"
import { H1, P } from "../elements"

const allPosts = ({ pageContext, data }) => {
  const { currentPage, numPages } = pageContext

  const isFirst = currentPage === 1

  const isLast = currentPage === numPages

  const prevPage = currentPage - 1 === 1 ? "/" : `/${currentPage - 1}`

  const nextPage = `${currentPage + 1}`

  const posts = data.allMdx.edges

  return (
    <Container>
      <FeatureImage />
      <Content>
        <H1 textAlign="center" margin="0 0 1rem 0">
          Id turpis posuere nam habitasse at mus viverra.
        </H1>
        <P color="dark2" textAlign="center">
          Enim nunc amet, eu, vitae nunc. Et in elementum aliquet nunc mauris,
          nulla. Convallis viverra neque quam mi sit.Id turpis posuere nam
          habitasse at mus viverra.
        </P>

        {posts.map(post => {
          return (
            <ContentCard
              key={post.node.frontmatter.slug}
              date={post.node.frontmatter.date}
              title={post.node.frontmatter.title}
              excerpt={post.node.frontmatter.excerpt}
              slug={post.node.frontmatter.slug}
            />
          )
        })}
      </Content>

      <Pagination
        isFirst={isFirst}
        isLast={isLast}
        prevPage={prevPage}
        nextPage={nextPage}
      />
    </Container>
  )
}

export default allPosts

export const pageQuery = graphql`
  query AllPostsQuery($skip: Int!, $limit: Int!) {
    allMdx(
      sort: { fields: frontmatter___date, order: DESC }
      skip: $skip
      limit: $limit
    ) {
      edges {
        node {
          frontmatter {
            slug
            title
            date
            excerpt
          }
        }
      }
    }
  }
`

Answer 1

您的 gatsby-node.js 看起来不错，分页功能正常。问题出在组件中。我想这个问题的出现是因为你没有在斜杠 (/) 中启动 URL (post 的 slug) 所以 URL 与当前的连接一.

我认为您在 ContentCard 组件中设置了这个 URL，所以尝试这样的操作：

  <Button href={`/${slug}`}>Read More</Button>

盖茨比分页问题

Gatsby pagination problems

javascript

pagination

reactjs

gatsby