[expo-router] Shared Routes with Single Routes

[the-devbear]

[expo-router] Shared Routes with Single Routes

[marklawlor]

To clarify how Expo Router works - all routes are accessible from any page if you link to it. Likewise, all routes are deep-linkable. If you have a link to a route, it will work, no matter where you are.

Groups have 1 purpose, to select what _layout (and consequently what navigator) is rendered.

If you want a /users/[id] route that keeps within the same navigator that you are currently in , then your files structure should be

(home)/
├─ _layout.tsx
├─ index.tsx
├─ users/
│  ├─ index.tsx
(profile)/
├─ _layout.tsx
├─ profile.tsx
├─ users/
│  ├─ index.tsx

Where both users/index.tsx files reexport the same UsersPage component. This is similar to React Navigation where you would need to have two <Screen /> components that have the same component.

Shared groups are for when you have routes that have their own layouts, but could belong to multiple groups. We can't do what we did before (create multiple users/index.tsx files) because they are still under their parents _layout. The shared groups syntax allows you to express this.

The other purpose are pages with unique layouts

(home)/
├─ _layout.tsx
├─ index.tsx
├─ users/
│  ├─ index.tsx
(profile)/
├─ _layout.tsx
├─ profile.tsx
├─ users/
│  ├─ index.tsx
(profile,home)/
├─ _layout.tsx
├─ settings.tsx

Say we have have navigated from / to /settings. The Settings page has a Href to /users/1, but which route do we navigate to? Shared groups retains the state of which group you were in so it will navigate you to the correct /users/1

[the-devbear]

Thank you a lot for taking the time and writing this detailed answer. It makes much more sense now for me.
Thanks again, and have a nice day!