Bug in navigation

I am facing a weird bug. Any help is appreciated. Context: I have setup a nav header in my __root.tsx <div className="flex gap-4 text-base-300 text-sm"> <Link to="/" className="hover:text-primary-100"> Home </Link> <Link to="/jds" className="hover:text-primary-100"> JDs </Link> <Link to="/candidates" className="hover:text-primary-100"> Candidates </Link> </div> Note that except of "/" all other routes are behind auth. I have attached a ss for the folder structure. In the webapp. When I navigate from Home to JDs, it works fine. But when I go back to Home it returns an error. Attached ss for that. Navigation between JDs and Candidates works fine. Between candidates and Home same issue. While researching I came to the following conclusion. My _auth.tsx code is import { createFileRoute } from "@tanstack/react-router"; import { SignIn } from "@clerk/tanstack-start"; export const Route = createFileRoute("/_authed")({ beforeLoad: ({ context }) => { if (!context.user.userId) { throw new Error("Not authenticated"); } }, errorComponent: ({ error }) => { if (error.message === "Not authenticated") { return ( <div className="flex items-center justify-center p-12"> <SignIn routing="hash" forceRedirectUrl={window.location.href} /> </div> ); } throw error; }, }); If I comment out the beforeLoad part, the navigation works fine. I have no clue what am I missing here. I am guessing it can be something like /_authed/jds -> /_authed (this throws error) -> / Is this the case, what is the fix?