How to replace multiple routes to prevent user from going back?

[lsps9150414]

I have 4 consecutive screens inside a stack navigator, A1 -> A2 -> B1 -> B2.

I want to allow the user to:

• nav forward to next screen sequentially
• nav back from A2 to A1
• nav back from B2 to B1
• but not from B1 to A2 nor A1

An example of this is A being sign up steps, B being onboarding steps. Once the user finished sign up and enters onboarding, he can no longer go back to sign up.

How can I achieve this?

[jaybowang]

use replace when push from A2 to B1

const router = useRouter();
router.replace('/B1');

[lsps9150414]

This still allows the user to nav back from B1 to A1 tho.

[GibbyBox]

I use the underlying react navigation stuff to handle that. I have not seen a way to do this with expo-router.

https://reactnavigation.org/docs/navigation-actions/#reset

import { useRootNavigation } from "expo-router";
import { CommonActions } from "@react-navigation/native";
// ...
function MyComponent() {
// ...
  const navigation = useRootNavigation();
  async function goToRoute() {
    // Typescript indicates navigation can be undefined here, 
    // so we're implementing a graceful fallback in such cases.
    try {
      if (!navigation) throw new Error();
      navigation.dispatch(CommonActions.reset({
        index: 0,
        routes: [{
          // This is going to heavily rely on what your folder
          // structure looks like. You can get a peek of what 
          // this should look like by getting the navigation.getState()
          // and logging it when you're on your destination screeen
        }],
      }));
    } catch (err) {
      // graceful fallback
      router.push('whatever/the/destination/is');
    }
  }
// ...

[wcastand]

How do you determine the shape of the route objects tho?

because expo-router has some weird formatting on those.

i can't find a way to make a generic reset that works with pathing correctly. it's not the same format as the one used in router.push and depends on groups, segments, params, if it's an index or not, etc

i can't make a reset to work :/

do you have a way to find the correct routes object/array based on an url/deeplink or route path?

[GibbyBox]

I never had to use it such that the destination could vary and be unknown to the developer.

You could take a look at the source code at how .push resolves links if you're going to attempt it.
Link pinned to what is current at time of writing

The RouterStore/this reference pertains to this class

@EvanBacon Do you have any further insights on this?

[wcastand]

i looked at it but it's using linking which is internal and not exposed to us so we can't replicate the resolve of path => state

right i did that and it seems to mostly work but not confident on it

	const nav = useRootNavigation()
	const isConnected = useAuthStore((s) => s.isConnected)
	return async (route: string) => {
		try {
			const [name, params] = route.split("?")
			nav?.reset({
				index: 1,
				routes: [
					isConnected ? { name: "(tabs)" } : { name: "(anonymous)/welcome" },
					name ? { name, params: params ? qs.parse(params) : {} } : undefined,
				].filter(Boolean),
			})
		} catch (e) {
			console.log(e)
			Sentry.Native.captureException(e)
		}
	}
}

[YuenSC]

It seems the dismiss method is working

 router.dismiss(2);
 router.replace("/B1");