无法将页面与URI匹配，出现next.js错误:提供的路径`/`与页面`/[slug]`不匹配
无法将页面与URI匹配，出现next.js错误:提供的路径`/`与页面`/[slug]`不匹配
提问于 2021-01-14 01:31:52
我正在尝试使用Wordpress作为数据源来构建一个动态页面。
我不能正确地使用getStaticProps和getStaticPaths，这会导致错误
Error: The provided path `/` does not match the page: `/[slug]`.出于测试的目的，我现在已经对页面名称进行了硬编码(理想情况下，我希望将其设置为动态的)(为此，我尝试使用codesandbox，但我似乎总是在使用next.js和codesandbox时遇到麻烦)。
我导航到http://localhost:3000/art-shows进行测试
这是我的slug.js页面
import Head from 'next/head'
import Link from 'next/link'
import { getAllPagesWithSlug, getAllPagesBySlug } from '../lib/api'
import { CMS_NAME } from '../lib/constants'
import Header from '../components/header'
export default function Index() {
console.log(router.query)
return (
<>
<Layout>
<Head>
<title>page</title>
</Head>
<Header />
<Container>
Hello World
</Container>
</Layout>
</>
)
}
export async function getStaticProps({ params }) {
const data = await getAllPagesBySlug('/art-shows')
return {
props: {
page: data.page,
},
}
}
export async function getStaticPaths() {
const allPages = await getAllPagesWithSlug()
return {
paths: allPages.edges.map(({ node }) => `${node.uri}`) || [],
fallback: true,
}
}这是我的连接../lib/api‘
const API_URL = process.env.WORDPRESS_API_URL
async function fetchAPI(query, { variables } = {}) {
const headers = { 'Content-Type': 'application/json' }
if (process.env.WORDPRESS_AUTH_REFRESH_TOKEN) {
headers[
'Authorization'
] = `Bearer ${process.env.WORDPRESS_AUTH_REFRESH_TOKEN}`
}
const res = await fetch(API_URL, {
method: 'POST',
headers,
body: JSON.stringify({
query,
variables,
}),
})
const json = await res.json()
if (json.errors) {
console.error(json.errors)
throw new Error('Failed to fetch API')
}
return json.data
}
export async function getAllPagesBySlug($id) {
const data = await fetchAPI(`
{
page(id: $id, idType: URI) {
content
isFrontPage
isPostsPage
uri
title(format: RAW)
seo {
title
metaDesc
metaRobotsNofollow
metaRobotsNoindex
}
featuredImage {
node {
sourceUrl
}
}
}
}
`)
return data
}
export async function getAllPagesWithSlug() {
const data = await fetchAPI(`
{
pages(first: 10000) {
edges {
node {
uri
}
}
}
}
`)
return data?.pages
}回答 2
Stack Overflow用户
回答已采纳
发布于 2021-01-14 07:46:13
再次感谢。我把所有的博客放在自己的文件夹里，我把页面留在根文件夹里。我终于让它像这样工作了。
slug.js有很多变化
import Head from 'next/head'
import Link from 'next/link'
import Container from '../components/container'
import MoreStories from '../components/more-stories'
import HeroPost from '../components/hero-post'
import Intro from '../components/intro'
import Layout from '../components/layout'
import { getAllPagesWithSlug, getAllPagesBySlug } from '../lib/api'
import { CMS_NAME } from '../lib/constants'
import Header from '../components/header'
export default function Page( {page} ) {
return (
<>
<Layout>
<Head>
<title></title>
</Head>
<Header />
<Container>
<div dangerouslySetInnerHTML={{ __html: page.content }} />
</Container>
</Layout>
</>
)
}
export async function getStaticProps({ params }) {
const data = await getAllPagesBySlug(params.slug)
console.log(data)
return {
props: {
page: data.page,
},
}
}
export async function getStaticPaths() {
const allPages = await getAllPagesWithSlug()
return {
//paths: [ { params: { slug: '${node.uri}' } } ],
paths: allPages.edges.map(({ node }) => `/${node.slug}`) || [],
fallback: true,
}
}和查询修改(页面(id："${$id}"，idType: URI) {)
export async function getAllPagesBySlug($id) {
const data = await fetchAPI(`
{
page(id: "${$id}", idType: URI) {
content
isFrontPage
isPostsPage
uri
content
title(format: RAW)
featuredImage {
node {
sourceUrl
}
}
}
}
`)
return data
}Stack Overflow用户
发布于 2021-01-14 05:31:02
如果你想得到所有的插件，那么你的文件应该被命名为...slug.js (注意...扩展运算符)，然后在文件内部使用useRouter()钩子并提取一个如下所示的段塞数组：
const router = useRouter();
const slug = router.query.slug || [];示例：https://codesandbox.io/s/twilight-darkness-ktpd2?file=/pages/%5B...slug%5D.js
如果你派生了上面的沙箱链接，那么你将拥有一个使用代码codesandbox的nextjs模板。如果上面的方法都不起作用，就把你的代码放进去，然后让我知道，这样我就可以检查一下了。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/65706928
复制相关文章
相似问题
腾讯云开发者
