redirect

redirect 函式允許您將使用者重新導向到另一個網址。redirect 可用於伺服器元件、路由處理器和伺服器動作中。

在串流環境中使用時，這會插入一個 meta 標籤，以便在客戶端發出重新導向。在伺服器動作中使用時，它會向呼叫者發送 303 HTTP 重新導向回應。否則，它會向呼叫者發送 307 HTTP 重新導向回應。

如果資源不存在，您可以改用 notFound 函式。

注意事項:

在伺服器動作和路由處理程式中，應在 try/catch 區塊之後呼叫 redirect。

如果您希望返回 308（永久）HTTP 重新導向而不是 307（暫時），您可以改用 permanentRedirect 函式。

參數

redirect 函式接受兩個參數

redirect(path, type)

參數	類型	說明
`path`	`字串`	要重新導向的網址。可以是相對或絕對路徑。
`type`	`'replace'`（預設值）或 `'push'`（伺服器動作中的預設值）	要執行的重新導向類型。

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

在伺服器元件中使用時，type 參數無效。

回傳值

redirect 不會回傳任何值。

範例

伺服器元件

app/team/[id]/page.js

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

注意事項：redirect 不需要使用 return redirect()，因為它使用 TypeScript 的 never 類型。

客戶端元件

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

app/client-redirect.tsx

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

app/actions.ts

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

常見問題`redirect` 使用 307 和 308？ HTTP 重定向的相關資訊。

版本歷史記錄

版本	變更
`v13.0.0`	新增 `redirect`。

後續步驟

permanentRedirect

permanentRedirect 函式的 API 參考。

這個對您有幫助嗎？