Add more visibility for "X-Remix-Reload-Document" header in docs

[RaniAgus]

Use case: I want to store a refresh_token cookie only in /login url, so it's not sent on any other path:

export const {
  getSession: getRefreshTokenSession,
  commitSession: commitRefreshTokenSession,
  destroySession: destroyRefreshTokenSession,
} = createCookieSessionStorage<RefreshTokenData, unknown>({
  cookie: {
    name: "__refresh_token",
    path: "/login",
    httpOnly: true,
    sameSite: "lax",
    ...(env.NODE_ENV === "production" ?
      {
        domain: env.ORG_DOMAIN,
        secrets: [env.SESSION_SECRET],
        secure: true,
      }
    : {}),
  },
});

And every time I navigate and get a token expired error I want to execute:

async function redirectToLogin(request: Request) {
  const url = new URL(request.url);
  const session = await getSession(request.headers.get("Cookie"));
  return redirect(`/login?origin=${encodeURIComponent(url.pathname)}`, {
    headers: {
      "Set-Cookie": await destroySession(session),
    },
  });
}

But the problemm is: if the user is navigating, this redirect("/login") doesn't trigger a redirect to /login path, it goes to /login.data, so that session cookie is not included:

I was about to submit a discussion for adding the ability to redirect() to perform document reloads... But it turns out that the feature exists and it's not documented anywhere 😓: #10705

Adding "X-Remix-Reload-Document" header fixed my issue. I think it would be very helpful for other people to find this in the docs.

[sergiodxa]

The X-Remix-Reload-Document header is not documented because it's an internal implementation of the router.

If you want to cause a redirect that performs a document reload you can use redirectDocument helper which is documented here https://reactrouter.com/api/utils/redirectDocument