Next.js带查询参数重定向无法用于React Native深度链接求助

一、先确认Deep Link基础配置是否正确 #

Deep Link参数拿不到，首先要排查基础配置是否到位：

• Android端：打开AndroidManifest.xml，检查intent-filter的scheme、host是否和支付回调URL匹配，确保包含BROWSABLE类别：

<intent-filter>
  <action android:name="android.intent.action.VIEW" />
  <category android:name="android.intent.category.DEFAULT" />
  <category android:name="android.intent.category.BROWSABLE" />
  <data android:scheme="your-app-scheme" />
  <!-- 若用Universal Links，补充host和path前缀 -->
  <data android:host="your-callback-domain.com" android:pathPrefix="/payment-callback" />
</intent-filter>

• iOS端：打开Info.plist，确认LSApplicationQueriesSchemes已添加你的App Scheme，同时检查Universal Links的配置（如果使用），确保URL Scheme已正确注册。

二、正确捕获Deep Link URL（区分冷/热启动） #

组件内的useRouter或路由钩子在冷启动时可能因路由未初始化而拿不到参数，直接用React Native原生的Linking API是更可靠的方案：

1. React Navigation 场景 #

在根App组件中同时处理冷启动初始URL和热启动的URL变化：

import { Linking, useEffect } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';

function App() {
  useEffect(() => {
    // 冷启动时获取初始URL
    const fetchInitialUrl = async () => {
      const url = await Linking.getInitialURL();
      url && handlePaymentCallback(url);
    };

    // 热启动时监听URL跳转
    const handleUrlUpdate = ({ url }) => {
      handlePaymentCallback(url);
    };

    fetchInitialUrl();
    const urlSubscription = Linking.addEventListener('url', handleUrlUpdate);

    return () => urlSubscription.remove();
  }, []);

  const handlePaymentCallback = (url) => {
    // 解析Query Params
    const urlObj = new URL(url);
    const paymentId = urlObj.searchParams.get('payment_id');
    const status = urlObj.searchParams.get('status');
    // 这里写你的支付结果处理逻辑，比如更新订单状态、跳转结果页
    console.log('支付回调参数:', { paymentId, status });
  };

  return (
    <NavigationContainer>
      {/* 你的导航结构 */}
    </NavigationContainer>
  );
}

2. Expo Router 场景 #

Expo Router的路由钩子可能存在初始化延迟，同样结合Linking API处理：

import { Linking, useEffect } from 'react-native';
import { useRouter } from 'expo-router';

export default function RootLayout() {
  const router = useRouter();

  useEffect(() => {
    const processDeepLink = async () => {
      const url = await Linking.getInitialURL();
      url && parseCallbackParams(url);
    };

    const handleUrlChange = ({ url }) => {
      parseCallbackParams(url);
    };

    processDeepLink();
    const subscription = Linking.addEventListener('url', handleUrlChange);

    return () => subscription.remove();
  }, []);

  const parseCallbackParams = (url) => {
    const params = new URL(url).searchParams;
    const paymentStatus = params.get('status');
    const transactionId = params.get('transaction_id');
    // 跳转至支付结果页并传递参数
    router.push({
      pathname: '/payment-result',
      params: { status: paymentStatus, transactionId }
    });
  };

  return <>{/* 你的布局内容 */}</>;
}

三、排查参数丢失的潜在问题 #

• 直接在浏览器中访问支付回调URL，确认query params是否完整存在，排除支付网关参数传递错误。
• 若使用Universal Links，检查服务器端的apple-app-site-association（iOS）或assetlinks.json（Android）配置，避免参数在重定向过程中丢失。
• 如果URL包含特殊字符，先解码再解析：const decodedUrl = decodeURIComponent(url);

四、避免依赖组件内路由钩子的即时值 #

useRouter().query这类钩子在组件刚挂载时大概率为空，因为路由初始化需要时间。直接通过Linking API获取原始URL并解析，是最稳妥的方式。

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