"use client";
import { useState } from "react";
import {
redirectNavigate,
redirectPush,
redirectLocation,
redirectLocationExternal,
redirectError,
} from "../redirect-actions";
export default function RedirectKindButtons() {
const [result, setResult] = useState<string | null>(null);
return (
<div>
<button
data-testid="redirect-navigate"
onClick={async () => {
await redirectNavigate();
}}
>
Navigate (default)
</button>
<br />
<button
data-testid="redirect-push"
onClick={async () => {
await redirectPush();
}}
>
Push (pushState)
</button>
<br />
<button
data-testid="redirect-location"
onClick={async () => {
await redirectLocation();
}}
>
Location (full browser navigation)
</button>
<br />
<button
data-testid="redirect-location-external"
onClick={async () => {
await redirectLocationExternal();
}}
>
Location External
</button>
<br />
<button
data-testid="redirect-error"
onClick={async () => {
try {
await redirectError();
} catch (e: any) {
if (e?.digest?.startsWith("Location=")) {
const url = e.digest.split("Location=")[1]?.split(";")[0];
setResult(`Caught redirect to: ${url}`);
} else {
setResult(`Unexpected error: ${e.message}`);
}
}
}}
>
Error (try/catch)
</button>
{result && <p data-testid="redirect-error-result">{result}</p>}
</div>
);
}