f
ferret
At the moment, expo-router sends the navigation to the closest navigator. If that navigator cannot handle the navigation, it passes it to the next one in the tree. I propose an option to choose which navigator should handle the navigation.
Example
You'd have to give an id to your navigators, like
<Stack id="rootStack" />
. Then, when you want to navigate through the
router
API or through the
Link
component, you would pass an extra option, like:
router.push({ href: "/[someParam]/tab1", params: { someParam: 1 }, navigatorId: "rootStack" })
Motivation
This is useful when you want to change params from a navigator that's upper in the component tree.
Workaround
With the current implementation, you can define a route in the navigator that you want to handle the navigation, like:
- (RootStack)/
- root-redirect.tsx
- [param]/
- (Tabs)/
- ...
which does
const { href, ...restParams } = useLocalSearchParams()
return <Redirect href={{ href, params: restParams }} />
then you'd use it like
router.push({ href: "/root-redirect", params: { href: "/[param]/tab1", param: 123 } })