fix(router): fix router.replace() navigation across nested navigators

[marklawlor]

Why

Fix ENG-10061
Fix expo/router#793
Fix expo/router#858
Fix expo/router#832

The linkTo function has two issues.

• It has trouble navigating to screens in different navigators with identical names
• it cannot perform a replace navigation while in a nested navigator (it can only replace at the currently level).

How

The original plan was to change linkTo to do navigation by deterministic keys, but React Navigation 7.0 is removing key based navigation, so we'll keep with screen names.

This PR rewrites the linkTo function and simplifies the logic into two paths.

push

linkTo will fire a dispatch action on the root navigator with the desired state.

replace

We compare the current navigation state vs the desired state and find the lowest common navigator that can perform a replace action. This would be the <Stack/> or <Tabs /> navigator that the two states share in common. The common navigator (it could be the root navigator if they have nothing in common!) is the source of the replace event

Test Plan

Manually tested and wrote a new test.

Checklist

• Documentation is up to date to reflect these changes (eg: https://docs.expo.dev and README.md).
• Conforms with the Documentation Writing Style Guide
• This diff will work correctly for npx expo prebuild & EAS Build (eg: updated a module plugin).

[linear]

ENG-10061 [expo-router] The action 'REPLACE' with payload {"name":"SCREEN"} was not handled by any navigator.

This issue was automatically imported from GitHub: #24353

Issue accepted by mark

---

Summary:

• The user is experiencing an issue with navigating from one nested stack to another nested stack within bottom tabs in a React Native application.
• The error the user encounters is: The action 'REPLACE' with payload {"name":"SCREEN"} was not handled by any navigator.
• In recreating the error, the user instructs to run the provided repository, click on the second tab and select "Go to Tab2 / Screen 2", then click on the first tab and select "Go to Tab2 / Screen 1", at which point the error appears.
• The user notes that they intended for this issue to be placed in the expo-router repository, and is not sure why it has ended up in the main Expo repository.
• The user is utilizing npm as the package manager for the project.

[marklawlor]

@EvanBacon Can you suggest more test scenarios that I should cover here?

[EvanBacon]

looks good and tests are passing. Original implementation was a hack.

[janusqa]

Hi @marklawlor do you know when it will be available?

[devoren]

@janusqa This pr is merged and released in the latest version 2.0.7, but in my application replace() does not replace or clear web history and I can go back :(

[janusqa]

@devoren thanks will take it for a spin.

[janusqa]

@devoren something is wrong here. I open app land on a page. I click a button which uses replace to move to a screen that is not the initial screen in another adjacent stack. The screen has no back button. Back button was expected that i can click on it to go to initial screen of stack. if i click on the bottom tab to take me to the initial screen in that stack then the initial screen has a back button, although it should not since its the initial screen. Will try to do a repro repo and file a bug issue for it.

Also still getting a large warning "The redirect prop on is deprecated and will be removed. Please use router.redirect instead "
Was that not fixed in 2.0.4 or 2.0.5?