react native - router.back with dynamic route dismisses entire stack - Stack Overflow

admin管理员组

文章数量:1357672

I have a dynamic route like /pattern/[id] which these items can navigate to related items so only the id changes. I want the Back button to go back, so pattern/3 > pattern/2. However, the back button dismisses the entire stack and leaves the pattern entirely.
Yes, I do router.push not replace:

router.push({
      pathname: '(auth)/pattern/[id]',
      params: { id: label,  },
    });

I have seen a suggestion to install react-native-screens, but I would like to avoid another dependency. I also tried a suggestion to add a custom key to the Stack like:

<Stack
        screenOptions={({ route }) => {
          const params = route.params as { id?: string } | undefined;

          return {
            headerStyle: {
              backgroundColor: 'transparent',
            },
            key: `pattern-${params?.id}`,
            headerShown: true,
            headerTransparent: true,
            headerBackVisible: false,
            headerShadowVisible: false,
            title: '',
            headerLeft: () => <ChevronBack direction="left" />,
            // headerRight: () => {
            //   return <FullScreenModalBackButton />;
            // },
          };
        }}
      >

Any ideas what else can be done to allow router.back to go back to previous param in the stack?

本文标签： react nativerouterback with dynamic route dismisses entire stackStack Overflow