使用expo-router传递参数时token为undefined，如何解决？

问题根源 #

你使用的Expo Router，其参数传递与获取逻辑和传统React Navigation不同，直接通过route.params无法拿到参数，同时传递方式也需要调整。

修复步骤 #

1. 修正index.js的参数传递代码

Expo Router提供两种参数传递方式，可根据需求选择：

• 方式一：查询参数（会显示在URL中，不适合敏感Token）

  import { router } from "expo-router";
  
  const result = JSON.parse(result); // 建议添加const声明变量
  router.replace({
    pathname: "Homescreen",
    params: { token: result.access_token }
  });
  

• 方式二：state传递（不会暴露在URL中，适合Token这类敏感数据）

  import { router } from "expo-router";
  
  const result = JSON.parse(result);
  router.replace("Homescreen", {
    state: { token: result.access_token }
  });
  

2. 修正Homescreen.js的参数获取代码

对应上述传递方式，使用不同的钩子获取参数：

• 如果用查询参数传递

  import { View, Text } from "react-native";
  import { useLocalSearchParams } from 'expo-router';
  
  export default function Homescreen() {
    const { token } = useLocalSearchParams();
    console.log(token);
    
    return (
      <View>
        <Text>Homepage</Text>
      </View>
    );
  }
  

• 如果用state传递

  import { View, Text } from "react-native";
  import { useRouter } from 'expo-router';
  
  export default function Homescreen() {
    const router = useRouter();
    const token = router.state?.token; // 用可选链避免undefined报错
    console.log(token);
    
    return (
      <View>
        <Text>Homepage</Text>
      </View>
    );
  }
  

3. 额外验证步骤

先在index.js中执行console.log(result.access_token)，确认这个值本身不是undefined，排除源数据为空的问题。

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