React-Navigation go to same route with different params

Question

I am using a React-Navigation screen with the name "User" to show info about a particular user. When navigating to this route I pass the param "id" which tells the screen what user it is dealing with. When viewing a user it is possible to click something that will let you view another user.

At the moment this works and the new param makes the other user's details show up. The problem is that it does not navigate to a new screen for the other user and instead just changes the current screen. The problem is that when you navigate back it does not take you to the screen for the initial user but whatever was before it. You also get no visual cue that you navigated.

I would thus like to know how I can force it to navigate to another version of the same route.

If it makes any difference, I am working with Redux and navigate by dispatching generated actions like:

NavigationActions.navigate({ routeName: 'User', params: {userId} })

Answer 1

You are looking for push instead of navigate. When you use navigate, it look for a route with that name, and if it exists navigate to it. When you use push, you go to a new route, adding a new navigation to the stack.

See the documentation here https://reactnavigation.org/docs/en/navigating.html#navigate-to-a-route-multiple-times

In your case, you should do:

NavigationActions.push({ routeName: 'User', params: {userId} }) 

or through your props (make sure your props has 'navigation'):

this.props.navigation.push('User', {userId:'paramValue'})

Answer 2

Use the navigation key to navigate to same route

const navigateAction = NavigationActions.navigate({
    routeName: 'User', 
    params: {userId},
    key: 'APage' + APageUUID
});

this.props.navigation.dispatch(navigateAction);

OR

this.props.navigation.navigate({
    routeName: 'User', 
    params: {userId},
    key: 'APage' + APageUUID
});

APageUUID is just a unique page id, can be generated with Math.random () * 10000

Reference

Answer 3

Actually, the push function should be used instead of navigate:

import * as React from 'react';
import { Button, View, Text } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';

const HomeScreen = ({ navigation }) => (
  <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
    <Text>Home Screen</Text>
    <Button
      title="Go to Details"
      onPress={() => navigation.navigate('Details')}
    />
  </View>
);

const DetailsScreen = ({ navigation }) => (
  <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
    <Text>Details Screen</Text>
    <Button
      title="Go to Details... again"
      onPress={() => navigation.push('Details')} // push instead of navigate
    />
  </View>
);

const Stack = createStackNavigator();

const App = () => (
  <NavigationContainer>
    <Stack.Navigator initialRouteName="Home">
      <Stack.Screen name="Home" component={HomeScreen} />
      <Stack.Screen name="Details" component={DetailsScreen} />
    </Stack.Navigator>
  </NavigationContainer>
);

export default App;

Test it here

Answer 4

This will reload the page with new data whenever the id changes.

 const [id , setId] = useState(props.route.params.id)

useEffect(() => {

        setId(props.route.params.id)

    }, [props.route.params?.id])

Put an onPress listener on the component while passing id or any props like..

 onPress={() => navigate(`yourComponentRouteName`, { id: _id })}