Navigation reset on nested Layout inside Slot

[DavideSegullo]

Which package manager are you using? (Yarn is recommended)

npm

Summary

Hi all, I am making an app from this example: expo router twitter.
I am trying to insert two separate areas, one private and one for guest users, at the moment I simulate the login by making a redirect at the beginning.

Mal the moment I go to use the tabs navigation with the stack navigation, I notice an unusual behavior, in fact, as seen in the video, if I click on an item that should take the user back to a subpage while keeping the tab active, the navigation is reset.

screen-record.mov

Thank you

Minimal reproducible example

Here you can find a minimal reproducible example.

[DavideSegullo]

It seems to be related to absolute path usage, if i use a relative path everything works fine, but it still seems to be a strange behaviour, idk.

I will update the example to provide something that works fine, so we can compare the different results

[DavideSegullo]

I have added an example here: https://github.com/DavideSegullo/expo-router-mre/tree/fix

It works a little better now, but the error is if there is nested navigation like this, you lose the reference to the parent, in my opinion and so as a result the routes then do not mount correctly

[EvanBacon]

@DavideSegullo I can't make sense of which part of this repo to look at.

[DavideSegullo]

Inside in the main branch, I have created two routes (guest) and private, I have a _layout.tsx file in the root that decides which one to go to.
For example, I do a redirect inside private in order to use the tabs view.

Within the tabs view, you can navigate to subpages using a stack navigation, but the error, as per the video, is that if I don't specify a relative path but do a push of a route using an absolute path, the routing always resets to the first Tab, as seen in the video, the code used is pretty much the same as the example you made for Twitter, I just added that layout in the root.

Thank you

[hasanaktas]

@EvanBacon

I tried to make an example similar to the one here in your twitter application.

Screen.Recording.2023-05-19.at.05.38.32.mov

Why is the tab structure broken when I rest the profile page in the Twitter example?

I'm trying to set up a conjugate structure with my website. My category landing pages can take many forms.

/jewelry/necklaces/best-products
/jewelry/necklaces
/jewelry

but I want to match them all in the same place.(exp: [...resolve].tsx) because there is no specific rule. It can be 2 or 3 or 5 or a single segment.

I showed what I want to do in the example of Twitter, I would be very happy if you review and give feedback.

https://github.com/hasanaktas/expo-router-twitter

[holmesjr]

I have a similar sounding issue that's a lot more simple to replicate: I have a nested layout where an absolute link to '/' in the subfolder ends up pointing to the subfolder's index page rather than the root of the site (this is on web).

[holmesjr]

Can you at least let us know if you need more info to fix this? It's present in both expo router 1 and 2.

[holmesjr]

Possibly related to #365

[caioedut]

Same here.

[EvanBacon]

It seems to be related to absolute path usage, if i use a relative path everything works fine.

This is correct. A side-effect of shared routes (very advanced feature) is that you must either use relative paths or absolute paths with useSegment() to keep track of the in-memory group. For example, pushing ./about on /(search) would lead to /(search)/about, this is the same as /(search)/about (more explicit, better practice imo).

This is not a bug, but you do need to be considerate of the (group) segments more.

[andreavrr]

Are there any solutions for this issue? I've encountered the same and can't seem to resolve it.

[evelant]

I think I'm also encountering this. I have tabs nested inside of a stack and a modal. If I switch tabs then navigate to elsewhere in the stack outside of the tabs when I call back() I am not taken to the tab I was on but rather to the root of the tabs navigator. The tabs navigator loses its state.

[evelant]

OK I think I figured it out. It seems to be a quirk or bug with routes not being picked up correctly from filesystem structure. If I ensure that I've defined every route ahead of time (that is, a <Stack.Screen) everything works correctly.