I have a form where you submit the ID of a record. The action validates the input and returns a redirect to the child page that loads the details of the record. The file structure looks like this:

Action Code:

  export async function action({ request, params }: LoaderFunctionArgs) {
    const formData = await request.formData();
    const submission = parseWithZod(formData, {schema: WAVE_SCHEMA});
    var waveNumber = submission.payload.waveNumber as string;

    if (submission.status !== "success") {
      return submission.reply();
    }
  
    return redirect(`/wms/waves/${waveNumber}`);
  }

That redirect works for every other page in the app, but if i try to navigate to the path with the slug it just doesn’t do anything. I have confirmed that the url is generating as expected, and I can manually navigate there via the browser, it just doesn’t want to navigate there from the form.

The flow is enter the id on /wms/waves which navigates you to /wms/waves/123456

Remix Route Structure:

Any help into this odd behavior would be appreciated.