expo / router

[ARCHIVE]: Expo Router has moved to expo/expo -- The File-based router for universal React Native apps

Home Page:https://docs.expo.dev/routing/introduction/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

expo router navigation change w/ query parameters breaks browser history stack

nikkwong opened this issue · comments

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

yarn

Summary

Hi, I am trying to move through a series of modals that are available via query parameters. The flow is like so:

?modal=register_user&step=1
?modal=register_user&step=2
?modal=register_user&step=3

I'm using expo-router's push and/or setParams to modify these query parameters. I notice though, using these methods breaks the history's navigation state. The user cannot navigate back to a previous step i.e. step=2 to step=1 by using the browser back button. It seems that expo router preserves browser history state correctly when navigating between actual route paths, but not between query parameters.

I have attached a minimum example below, thank you. (Neither the Pressable or Link techniques work properly).

Minimal reproducible example

To reproduce this error, click either the <Link> or the <Pressable> and then try to navigate back in the browser; the query parameters are not cleared until the back button is pressed 2-3 times, and it doesn't navigate to the current pathname it navigates to a prior screen (the URL that you were at before you entered this component—really wonky!).

import { P } from "@expo/html-elements";
import {
  Link,
  useGlobalSearchParams,
  usePathname,
  useRouter,
} from "expo-router";
import { Pressable, View } from "react-native";

export default () => {
  const { animal } = useGlobalSearchParams();
  const pathname = usePathname();
  const { push } = useRouter();
  const onPress = () => {
    push({
      pathname,
      params: {
        animal: "dog",
      },
    });
  };
  return (
    <View>
      {animal == "dog" ? <P>🐶</P> : <P>No Dogs here</P>}
      <View>
        <Link href="/test?animal=dog">See Dogs</Link>
        <Pressable onPress={onPress}>See Dogs (onPress)</Pressable>
      </View>
    </View>
  );
};

The project I'm working on is experiencing this same issue when using expo-routers push with updating queryParams on the same route. Is there any update on this or should this be handled using different features of expo-router? We are on 2.0.7

Is this even being looked at? Has anyone found any alternative?

Is this even being looked at? Has anyone found any alternative?

this is being addressed under expo/expo#24600