Hello All,

I am interested in setting the result of a server action as a query string on success so that the result state can be linked to other users.

'use client';
import { useFormStatus, useFormState } from 'react-dom';
import { addCreatorAction } from './add-creator.action';
import { useEffect, useState } from 'react';
import { useRouter, useSearchParams } from 'next/navigation';

export function AddCreatorForm() {
  const [creatorName, setCreatorName] = useState('');
  const [searchState, formAction] = useFormState(
    addCreatorAction,
    null
  );
  // const router = useRouter();
  // useEffect(() => {
  //   searchState?.found && router.push(`?name=${searchState.result.name}`, {scroll: false});
  // }, [searchState]);
  return (
    <>
      <form action={formAction}>
        <label htmlFor="name">Name:</label>
        <input
          type="text"
          id="name"
          name="name"
          value={creatorName}
          onChange={(e) => setCreatorName(e.target.value)}
        />
        <button type="submit">Submit</button>
      </form>
      {searchState?.found && (
        <div>
          <h2>{searchState.result.name}</h2>
          <h3>{searchState.result.id}</h3>
        </div>
      )}
      {(searchState?.found === false && searchState.similar.length > 0) && (
        <div>
          <h1>Did you mean:</h1>
          <ul>
            {searchState.similar.map((creator) => (
              <li>{creator.name}</li>
            ))}
          </ul>
        </div>
      )}
    </>
  );
}

In this code, the server action works as expected, however to push the results into the url I would have to use a side effect which I have my reservations about. Is there something about the server action/form action API that I'm missing that includes this functionality?

I know that the Link component has an href prop that does something similar to what I'm looking for.