Redirect not working even when the 302 status POST request is successful

[Jonfr0]

Hello guys, I am having a problem redirecting to a dynamic route in Remix. I send a post request to /notebook/archive when clicked on a button from the DataTable component

DataTable.tsx

const handleClick = async () => {
    const data = getSelectedData();
    try {
      if (data != null) {
        await axios.post("/notebook/archive", data);
      }
    } catch (error) {
      console.log(error);
      throw error;
    }
  };

  <Button
    type="button"
    variant="secondary"
    className="font-semibold"
    onClick={async () => await handleClick()}
  >
    Load Document
  </Button>

When the button is clicked, the action function is called in the notebook/archive, we get then document from redis and the we use the document.id to select the dynamic route.

notebook/archive

import { ActionArgs, json, redirect } from "@remix-run/node";
import type { V2_MetaFunction } from "@remix-run/node";
import { columns, Docs, Document } from "../../lib/columns";
import { DataTable } from "~/components/ui/DataTable";
import { useLoaderData } from "@remix-run/react";
import { redis } from "lib/redis";
import { updateArchive } from "lib/documents.server";

export const meta: V2_MetaFunction = () => {
  return [
    { title: "New Remix App" },
    { name: "description", content: "Welcome to Remix!" },
  ];
};

export async function action({ request }: ActionArgs) {
  const documentInfo = await request.json();
  const documentData = {
    id: documentInfo[0],
    title: documentInfo[1],
    date: documentInfo[2],
  };
  const cachedValue = await redis.hget("Documents", documentData.id);
  const document: Document = cachedValue ? JSON.parse(cachedValue) : null;
  if (document) {
    return redirect(`/notebook/archive/${document.id}`); 
  }
}

export async function loader() {
  try {
   // Some code
  } catch (error) {
    console.log(error);
    throw new Error("Error loading documents to archive");
  }
}

export default function Archive() {
  const data = useLoaderData();

  return (
    <>
      <div className="w-full gap-10">
        <DataTable columns={columns} data={data} />
      </div>
    </>
  );
}

Redirect is called but the browsor stays in /notebook/archive rather than going to /notebook/archive/id.

After redirect:

[kiliman]

I'm pretty sure it's because you're using axios instead of useFetcher.

// DataTable.tsx
const fetcher = useFetcher()
const handleClick = async () => {
    const data = getSelectedData();
    try {
      if (data != null) {
        fetcher.submit(data, { 
          action: '/notebook/archive', 
          method: 'post', 
          encType: 'application/json', 
        });
      }
    } catch (error) {
      console.log(error);
      throw error;
    }
  };

The rest of your code should work correctly.