How to push data from one page to another in Remix - React

I have a page that logs the user out and redirects them to another page but my intention is to send some data along the redirection with redirect. I am not sure of the correct way.

in component one. I have this code

Component 1.

export const loader = async ({ request }: LoaderArgs) => {
  const session = await getSession(request);

  if(condition === true){
    return redirect("/bye", {
        headers: {
          "Set-Cookie": await sessionStorage.destroySession(session),
          'X-Custom-Header': 'Custom Value',
        },
        data: {
          reason: 'we logged you out because of xyz'
        }
      });
  }
  
  return json({});
};

The redirection works okay. However, I need to get this data on the /bye page. The snippet below has not worked so far:

export default function Bye() {
  const { data } = useLoaderData<typeof loader>();

    return (
    <div>
      <h1>Off you go</h1>
      <p>Some Data: {data}</p>
    </div>
  );
}

I am not familiar with Remix yet but any help would be appreciated, I cant use a session because I killed it and was counting on sending the data via redirect. Thanks

Unfortunately, you can't send data in the body of a redirect request. That's just how the HTTP standard works. You could always include it as a search param.

However, you can also use session flash that is designed for this purpose. It allows you to set a value (like a message) in one request and retrieve it on the very next request. Remix will then automatically remove it.

You can read about it here: https://remix.run/docs/en/1.18.1/utils/sessions#sessionflashkey-value