Gatsby Slug无法生成正确的页面

如何解决Gatsby Slug无法生成正确的页面

我的gatsby插件没有生成正确的页面网址。 它应该生成-> / second-post-getting-started
但是它正在生成-> / second-post-getting-started / second-post-getting-started

它会将子弹添加到当前页面，而不是返回然后添加。我已经交叉检查了 gatsby-node.js和其他页面，但找不到错误。

这是gatsby-node.js代码。

 
const path = require('path')
const { slugify } = require('./src/util/utilityFunctions')
const authors = require('./src/util/authors')
const _ = require('lodash')

exports.onCreateNode = ({ node,actions }) => {
 const { createNodeField } = actions
 if (node.internal.type === 'MarkdownRemark') {
   const slugFromTitle = slugify(node.frontmatter.title)
   createNodeField({
     node,name: 'slug',value: slugFromTitle,})
 }
}

exports.createPages = async ({ actions,graphql }) => {
 const { createPage } = actions

 // Page templates
 const templates = {
   post: path.resolve('src/templates/single-post.js'),postList: path.resolve('src/templates/post-list.js'),tag: path.resolve('src/templates/tag-posts.js'),tagsPage: path.resolve('src/templates/tags-page.js'),authorPosts: path.resolve('src/templates/author-posts.js'),}

 const res = await graphql(`
   {
     allMarkdownRemark {
       edges {
         node {
           frontmatter {
             author
             tags
           }
           fields {
             slug
           }
         }
       }
     }
   }
 `)

 if (res.errors) return Promise.reject(res.errors)

 // Extracting all posts from res
 const posts = res.data.allMarkdownRemark.edges

 // Create single post pages
 posts.forEach(({ node }) => {
   createPage({
     path: node.fields.slug,component: templates.post,context: {
       // Passing slug for template to use to fetch the post
       slug: node.fields.slug,// Find author imageUrl from author array and pass it to template
       imageUrl: authors.find(x => x.name === node.frontmatter.author)
         .imageUrl,},})
 })

 // Create posts pagination pages
 const postsPerPage = 2
 const numberOfPages = Math.ceil(posts.length / postsPerPage)

 Array.from({ length: numberOfPages }).forEach((_,index) => {
   const isFirstPage = index === 0
   const currentPage = index + 1

   // Skip first page because of index.js
   if (isFirstPage) return

   createPage({
     path: `/page/${currentPage}`,component: templates.postList,context: {
       limit: postsPerPage,skip: index * postsPerPage,numberOfPages: numberOfPages,currentPage: currentPage,})
 })
 // Get all tags
 let tags = []
 _.each(posts,edge => {
   if (_.get(edge,'node.frontmatter.tags')) {
     tags = tags.concat(edge.node.frontmatter.tags)
   }
 })

 let tagPostCounts = {} // { tutorial: 2,design: 1}
 tags.forEach(tag => {
   // Or 0 cause it might not exist yet
   tagPostCounts[tag] = (tagPostCounts[tag] || 0) + 1
 })

 // Remove duplicates
 tags = _.uniq(tags)

 // Tags page (all tags)
 createPage({
   path: '/tags',component: templates.tagsPage,context: {
     tags,tagPostCounts,})

 // Tag posts pages
 tags.forEach(tag => {
   createPage({
     path: `/tag/${_.kebabCase(tag)}`,component: templates.tag,context: {
       tag,})
 })

 // Create author posts pages
 authors.forEach(author => {
   createPage({
     path: `/author/${slugify(author.name)}`,component: templates.authorPosts,context: {
       authorName: author.name,imageUrl: author.imageUrl,})
 })
}

index.js代码

       import React from "react"
import Layout from "../components/layout"
import SEO from "../components/SEO"
import { graphql,StaticQuery } from "gatsby"
import Post from "../components/Post"
import PaginationLinks from '../components/PaginationLinks'

const IndexPage = () => {
  const postPerPage = 2
  let numberOfPages
  return(
  <Layout pageTitle = "Full Stack Me" 
  pageSubtitle = "Just an Encyclopedia for Web Devs" >
    <SEO title="Home" keywords={[`gatsby`,`application`,`react`]} />
      <StaticQuery 
      query={indexQuery} render={data => {
        numberOfPages = Math.ceil(data.allMarkdownRemark.totalCount / postPerPage)
      return(
        <div>
          {data.allMarkdownRemark.edges.map(({ node }) => (
            <Post  
            key={node.id }
            title={node.frontmatter.title}
            author={node.frontmatter.author}
            slug={node.fields.slug}
            date={node.frontmatter.date}
            body={node.excerpt}
            fluid={node.frontmatter.images.childImageSharp.fluid}
            tags={node.frontmatter.tags}
            />
          ))}
          <PaginationLinks currentPage={1} numberOfPages={numberOfPages}/>
        </div>
      )
    }}
    />
  </Layout>
  )
}

const indexQuery = graphql`
query{
  allMarkdownRemark(
    sort: { fields: [frontmatter___date],order: DESC }
    limit: 2
    ) {
    totalCount
    edges{
      node{
        id
        frontmatter{
          title
          date(formatString: "MMM Do YYYY")
          author
          tags
          images{
            childImageSharp{
              fluid(maxWidth: 600){
                ...GatsbyImageSharpFluid
              }
            }
          }
        }
        fields{
          slug
        }
        excerpt
      }
    }
  }
}
`

export default IndexPage

解决方法

当{slug}不带正斜杠前缀时，您正在链接到slug：

<Link to={slug}>{/* No slash at the beginning */}
  <Img className="card-image-top" fluid={fluid} />
</Link>

（source）

这使它成为path-relative URL。如果您正在查看/foo/上的页面并链接到href="bar"，则完整的URL路径将为/foo/bar。您几乎可以肯定要使用绝对路径，但要使用相对于主机名的URL，可以通过确保始终以斜杠开头的URL来做到这一点：

<Link to={`/${slug}/`}>{/* With starting and trailing slashes */}
  <Img className="card-image-top" fluid={fluid} />
</Link>