Expo Web中React Navigation代码保存后返回主导航问题求助

我使用Expo开发Web应用，通过React Navigation实现页面间导航。但每次保存代码触发更新时，导航都会自动回到初始主页面。我曾尝试迁移到Expo Router，但因复杂度较高未能完成；也按照React Navigation官方文档的方法尝试持久化导航状态以保持URL路径，但问题仍未解决。

相关代码如下：

AppNavigator 代码 #

const PERSISTENCE_KEY = "NAVIGATION_STATE_V1";
    
const AppNavigator = () => {
  const [isReady, setIsReady] = useState(false);
  const [initialState, setInitialState] = useState();

  const prefix = Linking.createURL("myapp://");

  const config = {
    screens: {
      Main: {
        path: "main",
        screens: {
          Intro: "intro",
          Drawer: {
            path: "drawer",
            screens: {
              Home: "home",
              Profile: "profile",
            },
          },
        },
      },
    },
  };

  const linking = {
    prefixes: [prefix], // Replace with your app's actual prefixes
    config,
  };

  useEffect(() => {
    const restoreState = async () => {
      try {
        const initialUrl = await Linking.getInitialURL();

        console.log(initialUrl);

        if (Platform.OS !== "web" && initialUrl == null) {
          // Only restore state if there's no deep link and we're not on web
          const savedStateString = await AsyncStorage.getItem(PERSISTENCE_KEY);
          const state = savedStateString
            ? JSON.parse(savedStateString)
            : undefined;

          if (state !== undefined) {
            setInitialState(state);
          }
        }
      } finally {
        setIsReady(true);
      }
    };

    if (!isReady) {
      restoreState();
    }
  }, [isReady]);

  if (!isReady) {
    return null;
  }

  console.log(initialState);

  if (!isReady) {
    return <ActivityIndicator />;
  }

  return (
    <NavigationContainer
      onStateChange={(state) => {
        console.log(state);
        AsyncStorage.setItem(PERSISTENCE_KEY, JSON.stringify(state));
      }}
      linking={linking}
      initialState={initialState}
    >
      <FullAppNavigator />
    </NavigationContainer>
  );
};

export default AppNavigator;

App.js 代码 #

export default function App(props) {
  const navigationContext = {};

  return (
    <GestureHandlerRootView style={{ flex: 1 }}>
      <SafeAreaProvider>
        <NavigationContext.Provider value={navigationContext}>
          <AppNavigator />
        </NavigationContext.Provider>
      </SafeAreaProvider>
    </GestureHandlerRootView>
  );
}

核心问题 #

• 每次保存代码触发更新时，导航都会回到主页面，该如何解决？

内容的提问来源于stack exchange，提问作者Hatim Fayez