File Router: Nested Routes

Hilla
1

Hi everyone :wave:,
I’m trying a few things with the new File Router coming in Hilla 24.4. I would like to create a nested route like orders/:orderId/items/:itemId and I wonder how to achieve that with File Router?

I created a folder-/file-structure like this:

src/main/frontend/views/
- orders/
  - @index.tsx
  - {orderId}.tsx
  - items/
    - @index.tsx
    - {itemId}.tsx

Using a NavLink like <NavLink to="/orders/1">#1</NavLink> works fine.
Using a NavLink like <NavLink to="/orders/3/items/1">#3.1</NavLink> redirects to the default " No views found" view.

Any ideas how to structure my folders and files to achieve the desired nested route?

2

Your views/orders/items/{itemId}.tsx file corresponds to a URL like orders/items/1.

The trick is to use the {param} syntax also for directory names. The route orders/:orderId/items/:itemId is thus supposed handled by a file named views/orders/{orderId}/items/{itemId}.tsx. There were some reports of problems with this structure last week but I don’t remember if anyone looked into that yet.

1 Like
3

Thank you @Leif. Changing my folder/file-structure to

src/main/frontend/views/
- orders/
  - @index.tsx
  - {orderId}.tsx
  - {orderId}/
    - items/
      - {itemId}.tsx

solved the issue. Now a NavLink like <NavLink to="/orders/3/items/1">#3.1</NavLink> takes me to the right view.

1 Like
4

Note that you can potentially make the structure slightly easier to understand if you rename views/orders/{orderId}.tsx to views/orders/{orderId}/@index.tsx. It’s mostly a matter of taste but it’s at least in my mind slightly clearer to not have two different things with {orderId} directly in the name.

1 Like
5

I agree, this is easier to unterstand and it works as intended:

src/main/frontend/views/
- orders/
  - @index.tsx
  - {orderId}/
    - @index.tsx
    - items/
      - {itemId}.tsx