getStaticPaths 用于在 nextjs 中捕获所有路由 [[...Id]].js 的动态路由答案

【问题标题】：getStaticPaths for dynamic route catching all routes [[...Id]].js in nextjsgetStaticPaths 用于在 nextjs 中捕获所有路由 [[...Id]].js 的动态路由
【发布时间】：2021-11-25 10:31:50
【问题描述】：

我用 catch all route 方法开发了一个小应用程序 url 是 http://localhost:3000/category/fashion/19 见下图

现在我使用 getServerSideProps 方法工作正常，并更改为显示 getStaticProps 方法错误，但要使用 getStaticPaths 方法，我使用 context.params.Id[0]=fashion 和 context.params.Id1=19 获得动态值，但是不能在 getStaticPaths 中调用这个值，我缺少什么，请您解决这个问题。

类别/[...Id].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>
                                  ,&nbsp;&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;

【问题讨论】：

标签： reactjs next.js

【解决方案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做。

【讨论】：

我按照你的建议不起作用，你能更新我的代码吗？
我收到错误错误：在 getStaticPaths 中没有为 /category/[...Id] 提供所需参数 (Id) 作为数组