reject redirect

packages/next/src/client/components/router-reducer/reducers/server-action-reducer.ts

@@ -23,6 +23,7 @@ import {
 } from '../router-reducer-types'
 import { addBasePath } from '../../../add-base-path'
 import { createHrefFromUrl } from '../create-href-from-url'
+import { getRedirectError } from '../../redirect'
 
 type FetchServerActionResult = {
   result: ActionFlightData | undefined
@@ -122,13 +123,8 @@ export function serverActionReducer(
         })
       }
 
-      // TODO: do this instead when experimental React is enabled
-      // action.reject(getRedirectError(redirectLocation.toString()))
-
-      // this is an intentional hack around React: we want to redirect in a new render
-      setTimeout(() => {
-        action.navigate(redirectLocation.toString(), 'push', !flightData)
-      })
+      // we throw the redirection in the action handler so that it is caught during render
+      action.reject(getRedirectError(redirectLocation.toString()))
     } else {
       const [actionResult, flightData] = result ?? [undefined, undefined]
       // TODO: populate the prefetch cache with the new flight data

test/e2e/app-dir/actions/app/client/page.js

@@ -1,12 +1,12 @@
 'use client'
 
-import { useState } from 'react'
+import { useState, useTransition } from 'react'
 
 import double, { inc, dec, redirectAction, refreshAction } from './actions'
 
 export default function Counter() {
   const [count, setCount] = useState(0)
-
+  const [_, startTransition] = useTransition()
   return (
     <div>
       <h1>{count}</h1>
@@ -40,7 +40,9 @@ export default function Counter() {
       <button
         id="redirect"
         onClick={async () => {
-          redirectAction('/client/target')
+          startTransition(async () => {
+            await redirectAction('/client/target')
+          })
         }}
       >
         redirect