如何解决Url 未正确重定向到 GatsbyJs 中的特定页面
我的问题： 我试图将 Gatsby 与无头 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),})
})
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),})
})
resolve()
})
})
// ==== END Portfolio ====
})
}解决方法
在 MainMenu.js 中尝试替换：
<MenuItem to={item.object_slug} key={item.title}>
{item.title}
</MenuItem>
作者：
<MenuItem to={`/${item.object_slug}`} key={item.title}>
{item.title}
</MenuItem>
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
