我正在使用假 API 進行在線商店專案。我要做的就是顯示每個類別中的批次串列。所以我有類別組件，我希望它在單擊它時轉到lotsInCategory 頁面（lotsInCategory/[category]/index.tsx）。但是當我單擊類別頁面（category.tsx）中的鏈接時，我看到了這個錯誤：
錯誤：動態 SSG 頁面需要 getStaticPaths，而“/lotsInCategory/[category]”缺少 getStaticPaths。
這是我的檔案夾結構：
這是 category.tsx：
import React from 'react'
import Link from 'next/link
const Category = ({lots,category}:{lots:Array<any>,category:string}) => {
//category is an string passed from another component
return (
<>
{/* The line below shows me the category is passed currently */}
{console.log(category)}
<Link href={{pathname:`/lotsInCategory/${category}`}} as={`/lotsInCategory/${category}`}>
<div className="category">
<div className="img-container">
</div>
<div className="title">
{category}
</div>
</div>
</Link>
</>
)
}
export default Category;
這是lotsInCategory 組件（lotsInCategory/[category]/index.tsx）：
import React from 'react'
import axios from 'axios'
import https from "https"
import { GetStaticPaths,GetStaticProps } from 'next';
const LotsInCategory = ({data}:{data:Array<any>}) => {
return (<>
{console.log(data)}
<div>lotsInCategory</div>
</>
)
}
axios.defaults.httpsAgent=new https.Agent({
rejectUnauthorized:false,
})
const getStaticPaths:GetStaticPaths=async(context:any)=>{
let paths:Array<any>=[]
try{
const response=await axios.get(`https://fakestoreapi.com/products`)
paths=await response.data.map((el:any)=>({params:{category:el.category.toString()}}))
}
catch(er){
}
return{
paths,
fallback:true
}
}
export const getStaticProps:GetStaticProps=async(context:any)=>{
let data:Array<any> =[]
try{
const response= await axios.get(`https://fakestoreapi.com/products/category/${context.params.category}`)
data=response.data
alert("x")
}
catch(er:any){
}
return{
props:{data},
revalidate:2
}
}
export default LotsInCategory
而且我不想盡可能使用 getServersideProps ！
uj5u.com熱心網友回復：
你需要export你的getStaticPaths功能。getStaticPaths函式也不接受任何引數：
對于 TypeScript，您可以從下一個開始使用 GetStaticPaths 型別：
import { GetStaticPaths } from 'next'
export const getStaticPaths: GetStaticPaths = async () => {
// ...
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/482159.html
標籤：反应 axios 下一个.js 获取静态道具 获取静态路径
上一篇：如何在React中獲取父元素id
下一篇：根據特定的默認列對表進行排序