第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號(hào)安全，請(qǐng)及時(shí)綁定郵箱和手機(jī)立即綁定
已解決430363個(gè)問(wèn)題，去搜搜看，總會(huì)有你想問(wèn)的

如何處理調(diào)用 API 的 Next.js 中動(dòng)態(tài)路由的未找到 404？

如何處理調(diào)用 API 的 Next.js 中動(dòng)態(tài)路由的未找到 404？

慕沐林林 2023-10-14 16:53:18
我有一個(gè)由 React 和 Next.js 在客戶端開(kāi)發(fā)的網(wǎng)站，并從 Asp.Net core 服務(wù)器調(diào)用 API 來(lái)獲取動(dòng)態(tài)數(shù)據(jù)，例如產(chǎn)品和類(lèi)別。問(wèn)題是當(dāng)我請(qǐng)求的 URL 中有未定義的參數(shù)（需要傳遞給 API 來(lái)獲取相關(guān)數(shù)據(jù)）時(shí)，如何重定向到 404 未找到頁(yè)面。例如，如果請(qǐng)求的 URL 是 https://domain/product/unique-title-of-product，則“unique-title-of-product”將傳遞給 API，響應(yīng)的數(shù)據(jù)將顯示在產(chǎn)品詳細(xì)信息頁(yè)面中。但是，如果請(qǐng)求的 URL 是“https://domain/product/not-existed-title”，我該如何檢查并將其重定向到 404-not-found-page？我不想將 undefined-title 傳遞給服務(wù)器，因?yàn)槿绻惶幚硭?，它將響?yīng) null 或 200 或 500 內(nèi)部服務(wù)器錯(cuò)誤。那么看來(lái)我必須在客戶端處理 404 重定向，而無(wú)需任何服務(wù)器端交互。但是當(dāng)我嘗試在 next.js 中使用 404 狀態(tài)代碼進(jìn)行重定向時(shí)，狀態(tài)代碼將不會(huì)反映在瀏覽器中。在客戶端處理此問(wèn)題的最佳解決方案是什么？或者我應(yīng)該在服務(wù)器端處理它？
查看完整描述

3 回答

?
MMMHUHU

TA貢獻(xiàn)1834條經(jīng)驗(yàn) 獲得超8個(gè)贊

獲得 GoogleBot 理解的真實(shí)“HTTP 404”響應(yīng)的一種方法是生成 404 服務(wù)器端。


首先，在 /pages/404.js 中編寫(xiě)默認(rèn)的 404.js 頁(yè)面。


之后，將此功能添加到您的動(dòng)態(tài)頁(yè)面中：


export async function getServerSideProps (context) {

  // this will be called server-side only

  const pid = context.params.pid;


  // connect to your db to check if it exists, make a webservice call...

  if (!checkIfExists(pid)) {

    return { notFound: true };

    // this will display your /pages/404.js error page,

    // in the current page, with the 404 http status code.

  }

  return {

    props: {

      pid,

      // you may also add here the webservice content

      // to generate your page and avoid a client-side webservice call

    }

  };

};


查看完整回答
反對(duì) 回復(fù) 2023-10-14
?
揚(yáng)帆大魚(yú)

TA貢獻(xiàn)1799條經(jīng)驗(yàn) 獲得超9個(gè)贊

您可以進(jìn)行驗(yàn)證，檢查參數(shù)是否有效，并相應(yīng)地重定向


nextjs 負(fù)責(zé)pages/404.js，除非您想自定義它，否則不需要顯式添加它。


考慮以下頁(yè)面pages/post/[pid].js：


import { useRouter } from 'next/router'


const Post = () => {

  const router = useRouter()

  const { pid } = router.query

  // if id is not valid, explicitly redirect to 404 page

   if(!pid){

       router.push('/404')

   }

  return <p>Post: {pid}</p>

}


export default Post


查看完整回答
反對(duì) 回復(fù) 2023-10-14
?
浮云間

TA貢獻(xiàn)1829條經(jīng)驗(yàn) 獲得超4個(gè)贊

App Router 的方法是調(diào)用notFound()函數(shù)：


import { notFound } from 'next/navigation'

?

async function fetchUser(id) {

? const res = await fetch('https://...')

? if (!res.ok) return undefined

? return res.json()

}

?

export default async function Profile({ params }) {

? const user = await fetchUser(params.id)

?

? if (!user) {

? ? notFound()

? }

?

? // ...

}

查看完整回答
反對(duì) 回復(fù) 2023-10-14
  • 3 回答
  • 0 關(guān)注
  • 528 瀏覽
慕課專(zhuān)欄
更多

添加回答

舉報(bào)

0/150
提交
取消
微信客服

購(gòu)課補(bǔ)貼
聯(lián)系客服咨詢(xún)優(yōu)惠詳情

 幫助反饋 APP下載

慕課網(wǎng)APP
您的移動(dòng)學(xué)習(xí)伙伴

 公眾號(hào)

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號(hào)