How to redirect back to the previously route?

[qimalan]

hi,enyone can help me ? i am reding documention many times but cant find the answer

an unauthenticated user tries to access a protected route, for example, /post/1?page=1

since they are not logged in, they are redirected to: /login.

my question is: after they successfully log in, how can I redirect them back to the original route: /post/1?page=1?

I tried following the documentation:

function RouteComponent() {
  const search = Route.useSearch()
  const router = useRouter()

  return (<div>
    Hello "/login"!
    <button type="button"
      onClick={() =>
        router.history.push(search.redirect)
      }>
      Login
    </button>
  </div>)
}

but I encountered an error: 'search' object does not have a 'redirect' property

[fellipeutaka]

Hey! 👋 I ran into the same issue before and managed to solve it. Here's a more complete example that might help you understand how to handle redirecting unauthenticated users back to the route they tried to access after logging in.

✅ Solution:

You need to pass the original URL (e.g., /post/1?page=1) as a search param (redirect) when redirecting to login.

Then, after successful login, just read search.redirect and redirect the user there!

---

🗂️ Folder structure:

src/
└── routes/
    ├── (private)/
    │   ├── dashboard.tsx
    │   └── route.tsx
    └── (public)/
        ├── login.tsx
        └── route.tsx

---

🔒 In your protected route ((private)/route.tsx):

Use ctx.location.href to capture the full route + search:

import { createFileRoute, redirect } from "@tanstack/react-router";
import { getAuthCookiesAction } from "~/actions/auth";

export const Route = createFileRoute("/(private)")({
  beforeLoad: async (ctx) => {
    const { accessToken, refreshToken } = await getAuthCookiesAction();

    if (!accessToken) {
      throw redirect({
        to: "/login",
        search: {
          redirect: ctx.location.href,
        },
      });
    }

    // Rest of the logic of a JWT strategy
  },
});

---

🔓 In your login route ((public)/login.tsx):

Make sure to validate the redirect param using validateSearch:

import { createFileRoute } from "@tanstack/react-router";
import { z } from "zod";

export const Route = createFileRoute("/(public)/login")({
  component: RouteComponent,
  validateSearch: z.object({
    redirect: z.string().optional(),
  }),
});

And then in your component, grab the search params like this:

function RouteComponent() {
  const search = Route.useSearch();

  return ...
}

---

🧪 Real-world submit example:

Here’s how to submit the form and redirect after login:

function RouteComponent() {
  const search = Route.useSearch();
  const router = useRouter();

  async function handleLogin(event: React.FormEvent<HTMLFormElement>) {
    event.preventDefault();
    const form = new FormData(event.currentTarget);

    const res = await fetch("/api/login", {
      method: "POST",
      body: JSON.stringify({
        email: form.get("email"),
        password: form.get("password"),
      }),
      headers: {
        "Content-Type": "application/json",
      },
    });

    if (res.ok) {
      // Set cookies from the API response
      // const data = await res.json();
      await router.navigate({
        to: search.redirect ?? "/",
      });
    } else {
      alert("Invalid credentials");
    }
  }

  return (
    <form onSubmit={handleLogin}>
      <input name="email" type="email" placeholder="email" required />
      <input name="password" type="password" placeholder="password" required />
      <button type="submit">Login</button>
    </form>
  );
}

---

✅ Summary:

The key idea is:

export const Route = createFileRoute("/(private)")({
  beforeLoad: async (ctx) => {
    throw redirect({
      to: "/login",
      search: {
        redirect: ctx.location.href,
      },
    });
  },
});

...and later:

await router.navigate({
  to: search.redirect ?? "/",
});