How would you implement a notification status after redirecting in an action?

[s12chung]

With the code from the deleteContact action in the tutorial: https://reactrouter.com/en/main/start/tutorial#deleting-records

import { redirect } from "react-router-dom";
import { deleteContact } from "../contacts";

export async function action({ params }) {
  await deleteContact(params.contactId);
  return redirect("/");
}

I want to add a message like, "Contact Successfully Deleted!" at the "/" path. How would you pass that string along for that notification at "/"? Query parameters seems messy....

[yoanZagorov]

Been wondering how to do this for quite a while now... Have you managed to find a more elegant solution than embedding it in the url?

[sergiodxa]

You can use session.flash to update the session when redirecting and then session.get to retrieve the message on the target route.

Also if you use a toast you can use https://sergiodxa.com/tutorials/show-toast-after-a-remix-action

[yoanZagorov]

I like these solutions, but they are talking about using Remix and I'm just using React Router as of now. However, ended up using a similar solution - local storage. I set it like this in my action:

const redirectData = {
    originalPath: "",
    flashMsg: "Successfully logged in!",
    msgType: "success"
}

localStorage.setItem("redirectData", JSON.stringify(redirectData));
return redirect(originalPath || "/app");

Then, I retrieve it like this in the loader of the consumer:

 const loaderData = {};

  const storedRedirectData = JSON.parse(localStorage.getItem("redirectData"));

  if (storedRedirectData) {
    localStorage.removeItem("redirectData");
    loaderData.redirectData = storedRedirectData
  }

  return createSuccessResponse(loaderData);

The only problem is when using Strict Mode, since the second time localStorage is already cleared, so the if statement fails and an empty object is returned. Some ideas on how to fix this?