Invariant failed: Could not find an active match from "/register"
Hi , I'm using the router with file-based routing and pathless layout routes. I have an _auth.tsx layout that wraps authentication-related routes like /login, /register, and /forgot-password. However, my /login route is not matching, and I keep getting this error:
Invariant failed: Could not find an active match from "/login"
__root.tsx
import { RootRouteGenerics, RouteSearchSchema } from "@/types/navigation";
import { createRootRoute, createRootRouteWithContext, Outlet } from "@tanstack/react-router";
import { TanStackRouterDevtools } from "@tanstack/router-devtools";
type RouterContext = {
authentication: AuthContext
}
export const Route = createRootRouteWithContext<RouterContext>()({
validateSearch: (search) => RouteSearchSchema.parse(search),
component: () => {
return (
<>
<Outlet />
<TanStackRouterDevtools />
</>
);
},
});
_auth.tsx
import { createFileRoute, Outlet } from "@tanstack/react-router";
export const Route = createFileRoute("/_auth")({
component: Login,
});
function AuthLayout() {
return (
<div>
<h2>Auth Layout</h2>
<Outlet />
</div>
);
}
_auth.login.tsx
import { createFileRoute, Outlet } from "@tanstack/react-router";
export const Route = createFileRoute("/_auth/login")({
component: Login,
});
function Login() {
return (
<div>
<h2>Login</h2>
</div>
);
}
Invariant failed: Could not find an active match from "/login"
__root.tsx
import { RootRouteGenerics, RouteSearchSchema } from "@/types/navigation";
import { createRootRoute, createRootRouteWithContext, Outlet } from "@tanstack/react-router";
import { TanStackRouterDevtools } from "@tanstack/router-devtools";
type RouterContext = {
authentication: AuthContext
}
export const Route = createRootRouteWithContext<RouterContext>()({
validateSearch: (search) => RouteSearchSchema.parse(search),
component: () => {
return (
<>
<Outlet />
<TanStackRouterDevtools />
</>
);
},
});
_auth.tsx
import { createFileRoute, Outlet } from "@tanstack/react-router";
export const Route = createFileRoute("/_auth")({
component: Login,
});
function AuthLayout() {
return (
<div>
<h2>Auth Layout</h2>
<Outlet />
</div>
);
}
_auth.login.tsx
import { createFileRoute, Outlet } from "@tanstack/react-router";
export const Route = createFileRoute("/_auth/login")({
component: Login,
});
function Login() {
return (
<div>
<h2>Login</h2>
</div>
);
}
