javascript - 网址未正确重定向到 GatsbyJs 中的特定页面

Question

我的问题:我试图将 Gatsby 与 headless WordPress 集成并成功地做到了。我从 WordPress 动态制作了多个菜单，并通过 GraphQL 调用这些菜单。每件事似乎都运行良好，但是当我尝试从我的主页或任何初始页面重定向到另一个页面而不是仅仅转到该 URL 时，它将该 URL 附加到当前 URL 并将我重定向到 404 页面。

As you can See instead of directing me to about-me page it appended to the home url.

我的代码:MainMenu.js

import React from "react";
import { StaticQuery, graphql,Link } from "gatsby";
import styled from "styled-components";
import Logo from "./Logo";

const MainMenuWrapper = styled.div
`
display:flex;
background-color:#72498C;
`
const MainMenuInner = styled.div
`
max-width:960px;
margin:0 auto;
display:flex;
width:960px;
height:100%;
`

const MenuItem = styled(Link)
`
text-decoration:none;
color: white;
display:block;
padding:15px 20px;
`

const MainMenu=()=>{
    return(
    <StaticQuery 
    query={
         graphql
         `
         {
            allWordpressWpApiMenusMenusItems(filter: {name: {eq: "main menu"}}) {
                edges {
                  node {
                    items {
                      title
                      object_slug
                    }
                    name
                  }
                }
              }
         }
         `   
    }
    render={
        props=>(
            <MainMenuWrapper>
                <MainMenuInner>
                    <Logo/>
                    {props.allWordpressWpApiMenusMenusItems.edges[0].node.items.map(item=>(
                        <MenuItem to={item.object_slug} key={item.title}>
                            {item.title}
                        </MenuItem>
                    ))}
                </MainMenuInner>
            </MainMenuWrapper>
        )
    }/>
    )
};

export default MainMenu;

Gatsby-node.js

process.env.NODE_TLS_REJECT_UNAUTHORIZED = '0'
const _ = require(`lodash`)
const Promise = require(`bluebird`)
const path = require(`path`)
const slash = require(`slash`)
 
// Implement the Gatsby API “createPages”. This is
// called after the Gatsby bootstrap is finished so you have
// access to any information necessary to programmatically
// create pages.
// Will create pages for WordPress pages (route : /{slug})
// Will create pages for WordPress posts (route : /post/{slug})
exports.createPages = ({ graphql, actions }) => {
  const { createPage, createRedirect } = actions
    createRedirect({fromPath:'/', toPath:'/home' ,redirectInBrowser: true, isPermanent:true})
  return new Promise((resolve, reject) => {
    // The “graphql” function allows us to run arbitrary
    // queries against the local WordPress graphql schema. Think of
    // it like the site has a built-in database constructed
    // from the fetched data that you can run queries against.
 
    // ==== PAGES (WORDPRESS NATIVE) ====
    graphql(
      `
        {
          allWordpressPage {
            edges {
              node {
                id
                slug
                status
                template
                title
                content
                template
                featured_media {
                    source_url
                }     
              }
            }
          }
        }
      `
    )
      .then(result => {
        if (result.errors) {
          console.log(result.errors)
          reject(result.errors)
        }
 
        // Create Page pages.
        const pageTemplate = path.resolve("./src/templates/page.js")
        const portfolioUnderContentTemplate = path.resolve("./src/templates/portfolioUnderContent.js")
        // We want to create a detailed page for each
        // page node. We'll just use the WordPress Slug for the slug.
        // The Page ID is prefixed with 'PAGE_'
        _.each(result.data.allWordpressPage.edges, edge => {
          // Gatsby uses Redux to manage its internal state.
          // Plugins and sites can use functions like "createPage"
          // to interact with Gatsby.

 
          createPage({
            // Each page is required to have a `path` as well
            // as a template component. The `context` is
            // optional but is often necessary so the template
            // can query data specific to each page.
            path: `/${edge.node.slug}/`,
            component:  slash(edge.node.template === 'portfolio_under_content.php' ? portfolioUnderContentTemplate : pageTemplate),
            context: edge.node,
          })
        })
      })
      // ==== END PAGES ====
 
      // ==== POSTS (WORDPRESS NATIVE AND ACF) ====
      .then(() => {
        graphql(
          `
            {
              allWordpressPost {
                edges{
                  node{
                    id
                    title
                    slug
                    excerpt
                    content
                  }
                }
              }
            }
          `
        ).then(result => {
          if (result.errors) {
            console.log(result.errors)
            reject(result.errors)
          }
          const postTemplate = path.resolve("./src/templates/post.js")
          // We want to create a detailed page for each
          // post node. We'll just use the WordPress Slug for the slug.
          // The Post ID is prefixed with 'POST_'
          _.each(result.data.allWordpressPost.edges, edge => {
            createPage({
              path: `/post/${edge.node.slug}/`,
              component: slash(postTemplate),
              context: edge.node,
            })
          })
          resolve()
        })
      })
    // ==== END POSTS ====

    //==== Portfolio ====

     .then(() => {
      graphql(
        `
        {
          allWordpressWpPortfolio {
            edges {
              node {
                id
                title
                slug
                excerpt
                content
                featured_media {
                  source_url
                }
                acf {
                  portfolio_url
                }
              }
            }
          }
        }
        
        
        
        `
      ).then(result => {
        if (result.errors) {
          console.log(result.errors)
          reject(result.errors)
        }
        const portfolioTemplate = path.resolve("./src/templates/portfolio.js")
        _.each(result.data.allWordpressWpPortfolio.edges, edge => {
          createPage({
            path: `/portfolio/${edge.node.slug}/`,
            component: slash(portfolioTemplate),
            context: edge.node,
          })
        })
        resolve()
      })
    })
  // ==== END Portfolio ====
  })
}

Main Menu Query in GraphQL

Answer 1

在 MainMenu.js 中尝试替换:

<MenuItem to={item.object_slug} key={item.title}>
   {item.title}
</MenuItem>

通过:

<MenuItem to={`/${item.object_slug}`} key={item.title}>
   {item.title}
</MenuItem>