Impossible to have a navigate to a route multiple times

[jechazelle]

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

npm

Summary

Hi,

Thank you so much for your job and expo router!

I tried expo router and I have an issue: I can't navigate to a route multiple times as react navigation (Navigate to a route multiple times):

Minimal reproducible example

I tried with this code, but not work:

import { View, Text, Button } from 'react-native'
import React from 'react'
import { useRouter } from 'expo-router';

export default function settings() {
  const router = useRouter();

  return (
    <View>
      <Text>settings</Text>

      <Button title="Setings again" onPress={() => router.push('/home/settings')} />
    </View>
  )
}

[feRpicoral]

Have you tried using a Link as the docs state? https://docs.expo.dev/routing/navigating-pages/

[jechazelle]

@feRpicoral same thing when I use Link.

After the first click on Settings again and go to /home/settings page, I can't click again on Settings again, nothing is happening.

[kennethstarkrl]

This is also an issue when using dynamic routes. The url will update but the page does nothing.
Had to set the path name with usePathname() hook to a state then a useEffect with the path as a dependency to refresh the data.
Don't think that would work tho when the path doesn't change.

[jechazelle]

@kennethstarkrl do you have a fix or some code to fix it please?

I opened an issue #768 with dynamic routes. But same problem after the fix (#713). I think this problem is the same problem.

[kennethstarkrl]

@jechazelle

const { id } = useLocalSearchParams();
const [data,setData] = useState(null);
useEffect(()=>{
   //clear current data
   setData(null);
   //get the new data
   setData(newData);
},[id]);

The useEffect fires when the id changes. Not sure if that will work for paths where the url doesn't change. Might be able to just do the whole router as the dependency..

const router = useRouter();
const [data,setData] = useState(null);
useEffect(()=>{
   //clear current data
   setData(null);
   //get the new data
   setData(newData);
},[router]);

This is not a solution but a work around.

[bhyoo99]

Any updates?

[ozio]

Ah, my issue could be the same bug. As I mentioned there, it happens only when I override default <Stack.Screen /> options in the _layout.js. So, I think there is something in default Stack.Screen props that could fix it, but I didn't find it in the project code. Could somebody help me with that?

[snowdigital]

Check
#747
#9090

Close issue due to duplication

for lazy ones code to solve error is

for those who facing the same issue use following code

<Stack.Screen getId={({ params }) => params.id} name="user/[id]" />

getID function makes it work

dont forget to spread params

[Seimodei]

Upgrading expo-router to latest version (2.0.4 as at this comment) solves this issue.

[Nziranziza]

I am also facing a similar issue and I am using the latest version 2.0.5

[Tobjoern]

I'm using expo-router 2..0.9 with a route, which doesn't have any props, the 'push' method doesn't work for me,
as it has the same behviour the 'navigate' method has.

[ludwig-pro]

expo-router overrides the dispatch action type from a PUSH to NAVIGATE. use this patch at your own risk...

// expo-router+2.0.12.patch

diff --git a/node_modules/expo-router/src/global-state/routing.ts b/node_modules/expo-router/src/global-state/routing.ts
index e005d1a..413e2c6 100644
--- a/node_modules/expo-router/src/global-state/routing.ts
+++ b/node_modules/expo-router/src/global-state/routing.ts
@@ -19,7 +19,7 @@ function assertIsReady(store: RouterStore) {
 }
 
 export function push(this: RouterStore, url: Href) {
-  return this.linkTo(resolveHref(url));
+  return this.linkTo(resolveHref(url), "PUSH");
 }
 
 export function replace(this: RouterStore, url: Href) {
@@ -120,7 +120,7 @@ export function linkTo(this: RouterStore, href: string, event?: string) {
     case "REPLACE":
       return navigationRef.dispatch(getNavigateReplaceAction(state, rootState));
     default:
-      return navigationRef.dispatch(getNavigatePushAction(state, rootState));
+      return navigationRef.dispatch(getNavigatePushAction(state, rootState, event));
   }
 }
 
@@ -149,10 +149,11 @@ function rewriteNavigationStateToParams(
   return JSON.parse(JSON.stringify(params));
 }
 
-function getNavigatePushAction(state: ResultState, rootState: NavigationState) {
+function getNavigatePushAction(state: ResultState, rootState: NavigationState, type = "NAVIGATE") {
   const { screen, params } = rewriteNavigationStateToParams(state);
+
   return {
-    type: "NAVIGATE",
+    type,
     target: rootState.key,
     payload: {
       name: screen,

[Julian03-lab]

The thing what work for me was update the version of expo router (from 2.0.0 to 2.0.5)

[louielyl]

For future readers: I came to this post for the same problem, but updating the package did not work for me.
However, I got it working after installing "expo-router": "^2.0.14" and rebuild my project.