T
TanStack•2y ago
foreign-sapphire

Pathless layout with standard layout

Hi there! I'm new to TSR and a bit puzzled by the routing syntax compared to simpler ones like in Astro. Basically, I want to achieve this: 
/auth/register
/auth/login
/auth/register
/auth/login
Both routes should share a layout but accessing /auth should throw a 404. Currently, I have 
/auth
/auth/_auth.tsx
/auth/_auth/register.tsx
/auth/_auth/login.tsx
/auth
/auth/_auth.tsx
/auth/_auth/register.tsx
/auth/_auth/login.tsx
But accessing /auth does not throw a 404. Thanks a lot!
2 Replies
rare-sapphire
rare-sapphire•2y ago
If you want to throw a 404 when accessing the index route of /auth, you'll need to tell router that you explicitly don't want this route to be accessible. 
// src/routes/auth.index.tsx
// or
// src/routes/auth/index.tsx
import { createFileRoute, notFound } from '@tanstack/react-router'

export const Route = createFileRoute('/auth/')({
  loader: () => {
    throw notFound()
  }
})
// src/routes/auth.index.tsx
// or
// src/routes/auth/index.tsx
import { createFileRoute, notFound } from '@tanstack/react-router'

export const Route = createFileRoute('/auth/')({
  loader: () => {
    throw notFound()
  }
})
foreign-sapphire
foreign-sapphireOP•2y ago
Alright thanks!

Did you find this page helpful?