当前,我正在开发一个应用程序,该应用程序需要使用以下URL预渲染页面: / challenge /:id /:activeState 我要做的第一件事是创建一个挑战文件夹在pages目录中。在文件夹中,我创建了一个[... slug] .tsx文件以捕获剩余的URL,到目前为止,效果很好,我可能有多个具有不同ID的页面,并且每个页面的状态不同,所以我这样做:
import React from 'react'
import ChallengeLayout from 'components/layouts/challenge-layout'
import useSWR from 'swr'
import { useRouter } from 'next/router'
import { ChallengeDescription } from 'components/challenge-description/challenge-description'
import { content } from 'data/description-content'
import { getProgram, getPrograms, programEndpoint, getStages } from 'api/api'
const getDataSwr = (endpoint, fetchMethod, initialData) => {
const result = useSWR(endpoint, fetchMethod, { initialData: initialData })
return result.data
}
const ChallengePage: any = ({ program }) => {
const router = useRouter()
const programData = getDataSwr(programEndpoint(router.query.slug[0]), getProgram, program)
return (
<ChallengeLayout program={programData}>
<ChallengeDescription content={content} />
</ChallengeLayout>
)
}
export async function getStaticPaths() {
const response: any = await getPrograms()
const paths = response.results.map(async result => {
const stagesResponse: any = await getStages(result.id)
const stages = stagesResponse.map(stage => stage.id)
return { params: { slug: result.id.toString(), another: 'asd' } }
})
return { paths, fallback: false }
}
export async function getStaticProps({ params }) {
const res = await getProgram(params.slug)
return { props: { program: res }, revalidate: 1 }
}
export default ChallengePage
代码的主要部分是:
export async function getStaticPaths() {
const response: any = await getPrograms()
const paths = response.results.map(async result => {
const stagesResponse: any = await getStages(result.id)
const stages = stagesResponse.map(stage => stage.id)
return { params: { slug: result.id.toString(), ...stage.name } }
})
return { paths, fallback: false }
}
首先,我获得所有提取每个id的程序,因此基本上是基于程序显示一个页面,然后针对特定程序的每个阶段,我需要为每个阶段名称创建一个新页面。
对此有任何帮助吗?
当前我收到此错误:
未在数组中提供所需参数(段)作为数组 / challenge / [... slug]
的getStaticPaths