React Native Expo Router传参异常：photoURL转义字符丢失求助

问题原因 #

这是因为Expo Router在传递路由参数时，会自动对URL的query参数进行URL解码。你原始photoURL里的%2F是URL编码后的路径分隔符/，当参数通过URL的query string传递时，路由框架会自动把转义字符还原成原始字符，所以接收时就变成了/。

解决方法 #

方法1：二次编码+解码 #

传递参数前对photoURL做二次URL编码，接收时再解码回来：
主页面代码修改：

const onMarkerPressed = useCallback((userData) => {
  const userparams = {
    userData: JSON.stringify(userData),
    photoURL: encodeURIComponent(userData.photoURL) // 二次编码
  };
  router.navigate({ pathname: '/screen2', params: userparams });
}, [userLocation]); 

Screen2接收时解码：

const params = useLocalSearchParams();
const photoURL = decodeURIComponent(params.photoURL);
console.log("photoURL", photoURL)

方法2：通过JSON字符串传递（推荐） #

既然已经把userData转成了JSON字符串，直接从解析后的userData里取photoURL即可，避免单独参数的编码解码问题：
主页面去掉单独的photoURL参数：

const onMarkerPressed = useCallback((userData) => {
  const userparams = { userData: JSON.stringify(userData) };
  router.navigate({ pathname: '/screen2', params: userparams });
}, [userLocation]); 

Screen2解析后获取：

const params = useLocalSearchParams();
const userData = JSON.parse(params.userData);
const { photoURL } = userData;
console.log("photoURL", photoURL)

方法3：使用路由state传递 #

Expo Router支持通过state传递参数，这部分参数不会经过URL编码解码，直接存在内存中：
主页面修改：

const onMarkerPressed = useCallback((userData) => {
  router.navigate('/screen2', {
    state: { userData, photoURL: userData.photoURL }
  });
}, [userLocation]); 

Screen2通过useRouter的state接收：

const router = useRouter();
const { photoURL } = router.state;
console.log("photoURL", photoURL)

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