javascript - Expo router - shared routes with array syntax - Stack Overflow

admin管理员组

文章数量:1129618

I'm building an app with React Native and Expo Router, and I'm struggling with setting up shared routes using the array syntax for shared routes..

My folder structure looks something like this:

app/
 _layout.tsx (root layout)
 (tabs)/
 -- _layout.ts (tab layout)
 -- (index)/
 ---- _layout.tsx
 ---- index.tsx
 ---- screenxy.tsx
 -- search/
 ---- _layout.tsx
 ---- index.tsx
 ---- screenxy.tsx
 -- post/
 auth/
 ...

I want to add shared screens, such as user/[id] or organization/[id], that can be accessed from multiple routes like index, search, and post.

Users should be able to navigate to these shared screens without switching tabs and while maintaining their tab context and history.

For example:

• If a user navigates to user/[id] from the search tab, they should stay within the search tab's layout, maintaining its history.
• Similarly, navigating to the shared user/[id] screen from the index tab should keep the user within the home tab's layout.

Here are the specific challenges I'm facing:

Folder Structure: I don't fully understand what my folder structure should look like for shared routes. How should I organize user/[id] so it can be shared across index, search, and post while maintaining their independent indexes and screens?

Layout Handling: Which layout should handle the segments, and where should it be placed?

Navigation: If I want to navigate from the home (index) screen to user/[id], I’d use something like '(index)/user/[id]'. But if I want to navigate from search, do I need to use 'search/user/[id]'? How does navigation work for shared components across different routes?

Array Syntax: If I use something like '(index, search, post)/user/[id]' to share the same screen between these routes, where does that leave their own indexes/ unique screens? What’s the proper way to handle this?

Any guidance on folder structure, layout setup, and navigation for shared routes with Expo Router would be greatly appreciated!

本文标签： javascriptExpo routershared routes with array syntaxStack Overflow