Is it expected that action data is lost when navigating to a hash route ?

[genkoph]

Example Code

import { Form, Link, useActionData } from "@remix-run/react";

export function action() {
  return { hello: "there" };
}

export default function Page() {
  const actionData = useActionData<typeof action>();

  return (
    <div>
      <h1 id="heading">Welcome to Remix</h1>

      <Form method="POST">
        <button>submit</button>
      </Form>

      {actionData && JSON.stringify(actionData)}

      <Link to="#heading">Scroll to heading</Link>
    </div>
  );
}

Problem

Based on the example code, on form submit, we get and display the data. When we click on the Link, we get navigated to the heading but the action data gets lost.

Is that expected ? If yes, why?

[kiliman]

I haven't confirmed it, but it's probably because React Router treats hash links as navigation. And useActionData only retains data from the last POST.

Try using a standard <a href> tag instead of <Link to>.

[genkoph]

hey @kiliman, when using a regular anchor tag the behaviour is the same

[nathanforce]

Just coming here to note that I was also surprised by this behavior. I can understand why it happens but curious to know if it is indeed expected behavior or not.

[tombohub]

if it's just jump to id navigation it is expected UX to data persist, so I would say it's not expected. Did you find solution?