redirect

redirect 函式讓您能將使用者重新導向至另一個 URL。redirect 可用於伺服器元件、路由處理器和伺服器行為。

當在串流情境中使用時，這會插入一個 meta 標籤，以便在用戶端發出重新導向。當在伺服器行為中使用時，它會向呼叫者提供 303 HTTP 重新導向回應。否則，它會向呼叫者提供 307 HTTP 重新導向回應。

如果資源不存在，您可以使用notFound 函式來代替。

小提示:

• 在伺服器行為和路由處理器中，redirect 應在 try/catch 區塊之後呼叫。
• 如果您偏好傳回 308（永久）HTTP 重新導向而不是 307（暫時），您可以使用permanentRedirect 函式來代替。

參數

redirect 函式接受兩個引數

redirect(path, type)

預設情況下，redirect 將在伺服器行為中使用 push（將新項目新增至瀏覽器歷史堆疊），在其他任何地方使用 replace（取代瀏覽器歷史堆疊中的當前 URL）。您可以透過指定 type 參數來覆寫此行為。

當在伺服器元件中使用時，type 參數沒有任何作用。

回傳值

redirect 不會傳回值。

範例

伺服器元件

呼叫 redirect() 函式會拋出 NEXT_REDIRECT 錯誤，並終止渲染拋出該錯誤的路由區段。

import { redirect } from 'next/navigation'
 
async function fetchTeam(id: string) {
  const res = await fetch('https://...')
  if (!res.ok) return undefined
  return res.json()
}
 
export default async function Profile({
  params,
}: {
  params: Promise<{ id: string }>
}) {
  const { id } = await params
  const team = await fetchTeam(id)
 
  if (!team) {
    redirect('/login')
  }
 
  // ...
}

小提示：redirect 不需要您使用 return redirect()，因為它使用 TypeScript never 類型。

用戶端元件

redirect 可以透過伺服器行為在用戶端元件中使用。如果您需要使用事件處理器來重新導向使用者，您可以使用 useRouter Hook。

'use client'
 
import { navigate } from './actions'
 
export function ClientRedirect() {
  return (
    <form action={navigate}>
      <input type="text" name="id" />
      <button>Submit</button>
    </form>
  )
}

'use server'
 
import { redirect } from 'next/navigation'
 
export async function navigate(data: FormData) {
  redirect(`/posts/${data.get('id')}`)
}

常見問題

為什麼 redirect 使用 307 和 308？

當使用 redirect() 時，您可能會注意到使用的狀態碼是 307 代表暫時重新導向，而 308 代表永久重新導向。雖然傳統上 302 用於暫時重新導向，而 301 用於永久重新導向，但許多瀏覽器更改了重新導向的請求方法，從 POST 請求更改為 GET 請求（當使用 302 時），無論原始請求方法為何。

以下範例是從 /users 重新導向到 /people，如果您對 /users 發出 POST 請求以建立新使用者，並符合 302 暫時重新導向，則請求方法將從 POST 更改為 GET 請求。這沒有道理，因為要建立新使用者，您應該對 /people 發出 POST 請求，而不是 GET 請求。

307 狀態碼的引入意味著請求方法將保留為 POST。

• 302 - 暫時重新導向，會將請求方法從 POST 更改為 GET
• 307 - 暫時重新導向，會將請求方法保留為 POST

redirect() 方法預設使用 307，而不是 302 暫時重新導向，這表示您的請求將始終保留為 POST 請求。

深入瞭解 HTTP 重新導向。

版本歷史