File-based routes: share layout and preserve URL at dynamic path segment

[ivan-kleshnin]

I've read https://reactrouter.com/how-to/file-route-conventions#nested-layouts-without-nested-urls

It seems not possible to share layout while preserving URL for dynamic ($variable) segments.

Try-1

$lang.about/
  route.tsx
$lang.tsx -- shared layout, exposed in URL

Now, suppose we want 404 on /en and /de, and 200 on /en/contacts and /de/contacts.

Try-2

$lang.about/ -- loses relation to _$lang layout
  route.tsx
_$lang.tsx -- shared layout, not exposed in URL

Try-3

_$lang.about/ -- not working, supposedly breaks param syntax
  route.tsx
_$lang.tsx -- shared layout, not exposed in URL

Try-4

$lang.about/ -- 404 due to parent loader
  route.tsx
$lang.tsx -- throw new Response(null, {status: 404}) in loader

Try-5 (works)

// $lang.tsx
export async function loader({request}) {
  if (new URL(request.url).pathname.split("/").filter(Boolean).length == 1)
    throw new Response(null, {status: 404})
  }
}

Besides some verbosity for a common task, there's nothing too bad about the solution. Still, I wonder whether I've missed a better/more canonical way 🤔

[itsjavi]

I created an alternate FS routing package that might solve that issue, it uses Next naming convention though: https://github.com/pizzajsdev/pizzajs/tree/main/packages/app-router-fs

[ivan-kleshnin]

Thanks, it's great to have an option. I personally don't like NextJS conventions for routing, too much nesting that ruins DX.