How toNest routes with dynamic params in Remix
Let's say you have a URL like /remix-run where remix-run is the slug of the user or an organization, and you want to add another route /remix-run/remix where the new remix at the end is the repository name, similar to GitHub.
There are different ways we can define this, the simplest one is to create the files:
app/routes/$org.tsxapp/routes/$org.$repo.tsx
But if we went to /remix-run/remix we will only see the parent route (/remix-run) unless we also render an <Outlet /> in app/routes/$org.tsx. This is because the second route is nested inside the first one.
If we wanted to keep the URL nesting without UI nesting, so the URL is what we want but the UI is replaced, we need to rename the second file, so now we'll have:
app/routes/$org.tsxapp/routes/$org_.$repo.tsx
The $org_ tells Remix that we don't want to nest $repo inside the UI of $org.
We can also do the same thing for both formats but using folders in case we want to organize the code to live together with the route using it.
If we want UI nesting:
app/routes/$org/route.tsxapp/routes/$org.$repo/route.tsx
If we don't want UI nesting:
app/routes/$org/route.tsxapp/routes/$org_.$repo/route.tsx