#reactjs #next.js
Вопрос:
Я разработал небольшое приложение с URL-адресом метода catch all route http://localhost:3000/category/fashion/19see изображение ниже 
Теперь я использую метод getServerSideProps, который работает нормально, и изменен на метод getStaticProps, отображается ошибка, но я хочу использовать метод getStaticPaths, я получил динамические значения с помощью context.params.Id[0]=мода и контекст.параметры.Id1=19, Но не могу назвать это значение внутри getStaticPaths, Чего мне не хватает, и не могли бы вы, пожалуйста, решить эту проблему, пожалуйста.
категория/[…Идентификатор].js
import { useRouter } from 'next/router'
import Head from 'next/head'
import { Grid, Image,Segment, Card } from "semantic-ui-react"
import 'semantic-ui-css/semantic.min.css'
import Layout from '../../components/layout'
const Post = (props) => {
const router = useRouter()
const { Id } = router.query
console.log(props.category_list)
return(
<>
<Layout>
<Head>
<meta charSet="utf-8" />
<title>Test</title>
{/* <meta name="description" content={seo_description} /> */}
<meta name="keywords" content=""/>
<meta name="google-site-verification" content="rtIRrUNRpgZ_lFtlfS8LJ0-8j_d569BXS9NOGa_nM6Y" />
</Head>
<Grid className="store-list">
<Grid.Column width={16}>
<p>
<span>{props.category_title.heading_label}</span>
</p>
</Grid.Column>
</Grid>
<Grid columns={4} className="all-offers storeList">
{props.category_list.map((x) => {
return (
<Grid.Column>
<Segment>
<Card>
<a href ={x.store_url}>
{" "}
<Image
src={x.image}
alt=""
className="collection-img"
></Image>
</a>
<Card.Content>
<a href ={x.store_url}>
{" "}
<Card.Header>{x.name}</Card.Header>
</a>
<Card.Description>{x.store_summary}</Card.Description>
</Card.Content>
<Card.Content extra>
<p className="rewards">
<span>
<img src="/images/rewards.png" alt=""></img>
</span>
Cash rewards upto <span>AED {x.cashback}</span>
</p>
<p className="location">
<span>
<img src="/images/location.png" alt=""></img>
</span>
<span className="store-location" key="index">{x.store_branches}</span>
{/* {x.store_branches.map((locations, index) => (
<span className="store-location">
{index === 0 ? (
<span>{locations.store_location}</span>
) : index >= 1 ? (
<span>
,amp;nbsp;amp;nbsp;{locations.store_location}
</span>
) : null}
</span>
))} */}
</p>
</Card.Content>
</Card>
</Segment>
</Grid.Column>
);
})}
</Grid>
</Layout>
</>
)
}
export async function getStaticPaths() {
// How to call context value here
return { paths, fallback: 'blocking' }
}
export async function getStaticProps(context) {
const id = context.params.Id[1];
const postBody = {
category_id: id,
offer_type: "",
};
const offerList = await fetch('https://lenapp.ae/api/v5/web/list',{
method:'POST',
body: JSON.stringify(postBody),
headers: { "Content-Type": "application/json" },
})
const category = await offerList.json();
// const bookJson = JSON.stringify(book)
// const bookJson=offerData.stores;
const category_list=category.stores;
const category_title=category;
return {
props: {
category_list,
category_title
}
};
}
export default Post;
Ответ №1:
export async function getStaticPaths() {
//How to call context value here - explaining
const res = await fetch('your_api_path')
const posts = await res.json()
//params: {id: post.id} - this is your value will be fashion or 19, check the data/field you receiving
const paths = posts.map((post) => ({
params: { id: post.id },
}))
return { paths, fallback: 'blocking' }
}
Для вложенных динамических маршрутов: Вы можете создать /category/[style](folder)/[id](file) . Я предлагаю вам сначала разобраться со getServerSideProps всеми вашими страницами и маршрутизацией, а затем заняться getStaticProps этим .
Комментарии:
1. Я последовал вашему предложению, которое не работает, не могли бы вы, пожалуйста, обновить мой код.
2. Я получил ошибку Ошибка: Необходимый параметр (идентификатор) не был указан в качестве массива в getStaticPaths для /category/[…Id]