为什么 link 在我使用 getStaticProps 时不起作用？

Question

我是 next js 的新手，我正在使用 NextJS 开发项目。我的物品页面中有一些拍品当前显示拍品 (pagination/items.tsx)，我还有 lotDetails 页面，我希望它使用动态路由 (lotDetails\id\index.tsx) 显示每个拍品的详细信息。

这是文件夹结构：

现在，当我点击 Items.tsx 中的 Link 时，我希望它会转到 lotDetails 页面并传递道具，但没有任何反应！（它停留在项目页面上！）。这是 Items.tsx:

import React from 'react'
import Link from "next/link"
 const Items = ({currentItems}:{currentItems:any}) => {
   console.log(currentItems)
  //  const ids=currentItems.map((el:any)=>el.id)
  //  const paths=ids.map((el:any)=>{params:{id:el.toString()}})
  //  console.log(paths)
  return (
    <>
    <div className="container">
      
      <div className="row">
        {currentItems.map((el:any)=><div className="col-md-3 ">
         //this should be linked to lotDetails page!
          <Link href={{pathname:"../lotDetails/[id]",query:{id:JSON.stringify(el.id),title:el.title,image:el.image,description:el.description.toString(),rate:el.rating.rate,count:el.rating.count,price:el.price},}} as={`/lotDetails/${el.id.toString()}`}>
          
          <div className="lot">
            
        <div className="img-container">
          <img src={el.image}/>
        </div>
        <div className="title">
          {el.title}
        </div>
        <div className="price">
          <span className="price-title">Price:</span>
          <span>{el.price}</span>
          
        </div>
        </div>
        </Link>
        </div>)}
        
      </div>
    </div>
    </>
  )
}
export default Items;

我在 lotDetails 中使用 getStaticProps 和 GetStaticPaths:

 const LotDetails = (props:any) => {
   
const dispatch=useDispatch();
console.log(props)
const lotCount=1;

const addLots=()=>{
dispatch(AddCustomerLot({...props,lotCount:lotCount}))
}
  return (
    <>
   
    <div className='container lot-details'>
     <div className="row" >
     <div className="col-md-6">
         <div className="detail-container">
           <div className="title-details"><h3>{props.title}</h3></div>
           <div className="badge"><FontAwesomeIcon icon={faStar}/><span>{props.rate}</span></div>
           <div className="inventory">
             Inventory: <span className="count">{props.count}</span> 
           </div>
           <div className="description-details">{props.description}</div>
         <div className="price">Price: <span className="price-number">{props.price}$</span> </div>
         <button className="btn btn-regist" onClick={addLots}>Add to shopping basket</button>
         </div>
         
         
         </div>
       <div className="col-md-6"><img src={props.image} alt="" /></div>
      
       
     </div>
     </div>
    </>
    
  )
  }
export const getStaticPaths:GetStaticPaths=async(context:any)=>{
  const response= await axios.get("https://fakestoreapi.com/products")
  
  
const paths=response.data.map((el:any)=>({params:{id:el.id.toString()}}))
console.log(paths)
return{
paths,
fallback:'blocking'
}
}
 export const getStaticProps:GetStaticProps=async(context:any)=>{
 

  
  return{
    props:
      {
      //recieve props
        id:context.query.id,
          title:context.query.title,
          image:context.query.image,
          description:context.query.description,
          rate:context.query.rate,
          count:context.query.count,
          price:context.query.price
      }
    
      
    
  }
}


export default LotDetails;

当我删除 getStaticProps 和 getStaticPaths 时，link 起作用了！所以我收到 link 完美运行，问题出在 getStaticProps 和 getStaticPaths 中。我当然不想用getServerSideProps。更新根据julio的建议我改了pathName，我也把context.query改成了context.params.id：项目：

 <Link href={{pathname:`/lotDetails/${el.id}`,query:{id:JSON.stringify(el.id),title:el.title,image:el.image,description:el.description.toString(),rate:el.rating.rate,count:el.rating.count,price:el.price},}} as={`/lotDetails/${el.id.toString()}`}>
          
          <div className="lot">
            
        <div className="img-container">
          <img src={el.image}/>
        </div>
        <div className="title">
          {el.title}
        </div>
        <div className="price">
          <span className="price-title">Price:</span>
          <span>{el.price}</span>
          
        </div>
        </div>
        </Link>

批次详情：

 return (
    <>
   
    <div className='container lot-details'>
     <div className="row" >
     <div className="col-md-6">
//I removed all section which used props and querys using comments
         {/* <div className="detail-container">
           <div className="title-details"><h3>{props.title}</h3></div>
           <div className="badge"><FontAwesomeIcon icon={faStar}/><span>{props.rate}</span></div>
           <div className="inventory">
             Inventory: <span className="count">{props.count}</span> 
           </div>
           <div className="description-details">{props.description}</div>
         <div className="price">Price: <span className="price-number">{props.price}$</span> </div>
         <button className="btn btn-regist" onClick={addLots}>Add to shopping basket</button>
         </div> */}
         
         
         </div>
       {/* <div className="col-md-6"><img src={props.image} alt="" /></div> */}
      
       
     </div>
     </div>
    </>
    
  )
  }

export const getStaticPaths:GetStaticPaths=async(context:any)=>{
  const response= await axios.get("https://fakestoreapi.com/products")
  
  
const paths=response.data.map((el:any)=>({params:{id:el.id.toString()}}))

console.log(paths)
return{
paths,
fallback:'blocking'
}
}

 export const getStaticProps:GetStaticProps=async(context:any)=>{
 

  
  return{
    props:
      {
      
        id:context.params.id,
          // title:context.query.title,
          // image:context.query.image,
          // description:context.query.description,
          // rate:context.query.rate,
          // count:context.query.count,
          // price:context.query.price
      }
    
      
    
  }
}

Answer 1

最后，我分两步解决了问题：

1-我正在使用 google chrome 浏览器，因此我配置了 chrome 并添加了我的本地主机端口：

我使用了这个 link：chrome://inspect/，单击配置按钮并添加了我的本地主机端口（在我的例子中 localhost:3000）

2-我将此代码添加到 lotDetails 页面（我使用 axios 的页面）

axios.defaults.httpsAgent=new https.Agent({
  rejectUnauthorized:false,
})

别忘了导入： import https from "https" 现在可以使用了。

为什么 link 在我使用 getStaticProps 时不起作用？

why link doesn't work when I use getStaticProps?

reactjs

next.js