Say I have a Remix project with a route structure like this:
root.tsx (contains a main sidebar with NavLinks, one of which is "Shops", and an <Outlet />)
-routes
|-_index.tsx (redirects to /shops, so that the "Shops" NavLink is active by default)
|-shops.tsx (is a list of shops)
|-shops_.$id.tsx (individual shop page)
|-shops_.$id.main.tsx
|-shops_.$id.invoices.tsx
|-shops_.$id.{etc, etc...}.tsx
/shops/$id
contains tabs for navigating to each sub-route, and an <Outlet />
for displaying them (main
, invoices
, etc…). I want the main
tab to be selected by default, similar to how “Shops” is selected by default in the sidebar (which is typically done with a redirect from the parent “index” route). How exactly should I structure my route files, and from which file (if any) should the redirect be done?
I can’t seem to figure it out. If I redirect from /shops/$id
to /shops/$id/main
, I end up in an infinite redirect loop.
If I don’t redirect, then by default no tab is selected, and the <Outlet />
remains empty until the user selects a tab.