Remix with remix-flat-routes: Redirect does not work when navigating to slug route

Question

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/:id

Remix Route Structure:

Any help with this odd behavior would be appreciated.

EDIT: It seems to be something with the $Slug route.

   <div className="mt-4">
  <Suspense fallback={<div>Loading Order Details...</div>}>
    <Await resolve = {waveData}>
      {data => {
        if (data.error) {
          console.log(data.error)
          return <h1 className="italic text-red-500">There was an error retrieving the order lines</h1>;
        }
        if (!data.orderLines.length) {
          return <h1 className="italic text-red-500">No order lines found</h1>;
        }
        let statusBreakdown = data.orderLines.reduce((acc, line) => {
          if (acc[line.status]) {
            acc[line.status] += 1;
          } else {
            acc[line.status] = 1;
          }
          return acc;
        }, {});
        return (
          <div className="w-full">
            <p className="font-bold underline">Line Statuses:</p>
            <ul>
              {Object.entries(statusBreakdown).map(([status, count]) => (
                <li key={status} className="pl-5 label">
                    <p>{statusMapping[status]}:</p>
                    <p>{count}</p>
                </li>
              ))}
            </ul>
            <div className="label pl-2">
              <p>Total Lines:</p> 
              <p>{data.orderLines.length}</p>
            </div>
          </div>
        );
      }}
    </Await>
  </Suspense>
  <Suspense fallback={<div>Loading Pick Details...</div>}>
    <Await resolve = {pickData}>
      {data => {
        if (data.error) {
          console.log(data.error)
          return <h1 className="italic text-red-500">There was an error retrieving the pick details</h1>;
        }
        if (!Object.keys(data.pickDetails).length) {
          return <h1 className="italic text-orange-500">No lines in pick status</h1>;
        }

        return (
          <div className="w-full">
            <p className="font-bold underline">Pick Details:</p>
            <ul className="columns-2">
              {Object.entries(data.pickDetails).map(([order, ids]) => (
                <li key={order} className="label">
                  <p className="font-semibold pl-5">{order}</p>
                  {ids.size > 1 ? <p className="italic text-red-500">Invalid</p>: <p className="text-green">Valid</p>}
                </li>
              ))}
            </ul>
          </div>
        );
      }}
    </Await>
  </Suspense>
</div>

If I replace the ui with just a simple output that doesn't wait for the promises to resolve the redirect works. Again, seems really weird since this page loads and works just fine when navigating directly to the page

Loader:

export const loader = async ({ params }: LoaderFunctionArgs) => {
 let waveNumber = params.wave as string;
 return defer({
  waveNumber,
  waveData: getWaveOrders(waveNumber),
  pickData: getWavePicks(waveNumber),
 });
};

the two function calls are async functions that interact with external apis. Both have their own Suspense component so they can load seperately.

Answer 1

I'm guessing how your UI is setup, but here you can see that the redirect is working. Feel free to modify this StackBlitz to match your code and reproduce the problem you're having.

⚡️ StackBlitz https://stackblitz.com/edit/remix-run-remix-theqfa?file=app%2Froutes%2Fwms%2Fwaves%2Froute.tsx