Expo Router slug folder for parent/{parentId}/child/{childId}

I would like to ask some idea using Expo Router.

I have decks with a simple routing:

 /deck/detail/[id].tsx 
 /deck/form/add/index.ts
 /deck/form/edit/[id].tsx

Also I have cards. Cards has relations with decks.

In laravel there is Nested resources for this. It means when you want to edit a child then you should use the next route:

parent/{parentId}/child/{childId}

I like this idea so if it's possible I want to use something similar in Expo Route for my child.

I would like to create the next routing for cards:

/deck/{deckId}/card/edit/[id].tsx
/deck/{deckId}/card/add/index.tsx

But I don't know how to implement it in expo router. Is it possible to make "slug" folder?

Actually I can just implement the next solution:

/card/edit/[id].tsx  (also passed deckId as router param)
/card/add/[deckId].tsx

But I don't feel it enough clean.

What is the best practice to do that?

Solution

Slug folders exist as shown here: https://docs.expo.dev/router/reference/hooks/#uselocalsearchparams

However, using them to create the structure of URL you want is more complicated than depicted. This would be your laravel-like file structure:

├── ...
├── app
|   ├── _layout.js 
|   ├── index.js (home for app)
│   └── deck
|        └── [deckId]
|                ├── index.js (view for deck)
|                └── card
|                      └── [cardId]
|                              └── index.js (view for card)

From here, you could start playing to get your full structure. Whenever you use an index.tsx file, that element does not add into the URL. Otherwise, if you called it "add.tsx", that would be added to the url.

Take into account that, if your router is working, you can do "http://localhost:8081/_sitemap" to see all accesible routes. And after accesing, you can assign numbers to the dynamic params.

This file structure gives what you ask for:

 ├── ...
 ├── app
 |   ├── _layout.tsx 
 |   ├── index.tsx (home for app)
 │   └── deck
 |        ├── detail
 |        |     └── [deckId].tsx
 |        ├── form
 |        |     ├── add
 |        |     |    └── index.tsx
 |        |     └── edit
 |        |          └── [deckId].tsx
 |        └── [deckId]
 |                ├── index.tsx (view for deck)
 |                └── card
 |                      └── [cardId]
 |                              └── index.js (view for card)

This page also provides important information about that: https://docs.expo.dev/router/reference/search-parameters/#local-vs-global-search-parameters

It seems it will be neccesary to use localsearchparams, globalsearchparams and send objects to fully navigate to URLs, but that is explained in the documentation.