react-navigation/native中如何获取URL哈希并处理Cognito重定向路由问题？

完全可行，核心思路是在React Navigation接管路由前，先拦截并解析URL的哈希参数，再手动控制路由跳转，避免默认路由的自动跳转。具体可以按以下步骤实现：

• 启动时解析初始URL哈希
  用React Native自带的Linking API获取应用启动时的URL，解析其中的哈希参数提取token。在根组件的useEffect里执行这个逻辑：

  import { Linking, useEffect } from 'react-native';
  import AsyncStorage from '@react-native-async-storage/async-storage';
  
  useEffect(() => {
    const parseInitialURL = async () => {
      const url = await Linking.getInitialURL();
      if (!url) return;
  
      const hashStart = url.indexOf('#');
      if (hashStart !== -1 && url.includes('/loginredirect')) {
        // 解析哈希中的参数
        const hashParams = new URLSearchParams(url.slice(hashStart + 1));
        const idToken = hashParams.get('id_token');
        
        if (idToken) {
          // 把token存到本地存储，方便后续使用
          await AsyncStorage.setItem('user_token', idToken);
          // 这里后续手动导航到目标路由
        }
      }
    };
  
    parseInitialURL();
  }, []);
  

• 用全局Navigation Ref手动控制路由
  为了绕过React Navigation的默认初始路由跳转，需要创建全局的navigation ref来手动导航：

  1. 先定义ref：

     import { createNavigationContainerRef } from '@react-navigation/native';
     
     export const navigationRef = createNavigationContainerRef();
     
     export function navigateTo(routeName, params) {
       if (navigationRef.isReady()) {
         navigationRef.navigate(routeName, params);
       }
     }
     

  2. 在NavigationContainer中绑定这个ref：

     <NavigationContainer ref={navigationRef}>
       {/* 你的路由栈配置 */}
     </NavigationContainer>
     

  3. 解析完token后，调用navigateTo('LoginRedirect')，就能跳转到你定义的目标路由，而不是默认路由。

• 处理后台唤醒的深链接
  如果应用在后台时被Cognito重定向唤醒，需要监听Linking的url事件，重复解析逻辑：

  useEffect(() => {
    const handleDeepLink = ({ url }) => {
      // 复用之前的解析和导航逻辑
      const hashStart = url.indexOf('#');
      if (hashStart !== -1 && url.includes('/loginredirect')) {
        const hashParams = new URLSearchParams(url.slice(hashStart + 1));
        const idToken = hashParams.get('id_token');
        
        if (idToken) {
          AsyncStorage.setItem('user_token', idToken).then(() => {
            navigateTo('LoginRedirect');
          });
        }
      }
    };
  
    const subscription = Linking.addEventListener('url', handleDeepLink);
    return () => subscription.remove();
  }, []);
  

• 动态设置初始路由
  还可以根据是否解析到token，动态设置React Navigation的初始路由，进一步避免默认跳转：

  import { useState } from 'react';
  
  function App() {
    const [initialRoute, setInitialRoute] = useState('Home');
  
    useEffect(() => {
      const checkRoute = async () => {
        const url = await Linking.getInitialURL();
        if (url?.includes('/loginredirect')) {
          // 解析token...
          setInitialRoute('LoginRedirect');
        }
      };
      checkRoute();
    }, []);
  
    return (
      <NavigationContainer initialRouteName={initialRoute}>
        {/* 路由配置 */}
      </NavigationContainer>
    );
  }
  

通过这些步骤，就能让React Navigation正确识别Cognito的重定向路径，提取到哈希中的token并执行后续操作。

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