React Native中Axios请求成功后重定向并传参至/home路由

一、先改跳转逻辑——React Native不能用window.location.href #

React Native里没有浏览器的window对象，得用React Navigation（最常用的路由库）来实现页面跳转，先确保你已经安装并配置好这个库。

修改请求后的跳转代码 #

要是你用的是React Navigation 6+版本，可以通过navigation.navigate方法跳转同时传递参数，先确保组件能拿到navigation对象（比如用useNavigation钩子）：

import { useNavigation } from '@react-navigation/native';

const YourComponent = () => {
  const navigation = useNavigation();

  const sendRequest = () => {
    axios
      .post('http://10.0.2.2:8000/api/details', Data56)
      .then(res => {
        // 跳转到Home页面，同时传递Data56和后端返回的session相关数据
        navigation.navigate('Home', { 
          data56: Data56,
          backendSessionData: res.data // 后端如果返回token、用户信息这类数据，优先用这个创建session
        });
      })
      .catch(err => {
        console.error('请求失败:', err);
      });
  };

  // 组件其他逻辑...
};

二、在Home路由中接收参数并创建Session #

1. 接收跳转传递的参数 #

在Home组件里用useRoute钩子获取传递过来的参数：

import { useRoute } from '@react-navigation/native';
import AsyncStorage from '@react-native-async-storage/async-storage'; // 用于本地存储session

const Home = () => {
  const route = useRoute();
  // 解构参数，加|| {}避免无参数时报错
  const { data56, backendSessionData } = route.params || {};

  // ...
};

2. 创建并存储Session #

React Native里没有浏览器的sessionStorage，一般用AsyncStorage（持久化存储，APP重启后数据还在）或者MMKV（性能更优的存储库）来模拟session。如果需要临时存储（APP重启后失效），可以用Redux、Zustand这类全局状态管理工具。

用AsyncStorage存储Session的示例

import { useEffect } from 'react';

useEffect(() => {
  const createAndSaveSession = async () => {
    try {
      // 优先使用后端返回的数据创建session，比前端传递的data56更安全可靠
      const sessionInfo = backendSessionData || {
        // 从data56中提取适合创建session的字段，比如用户ID、唯一标识等
        userId: data56?.userId,
        detailData: data56
      };
      // 将对象转为字符串存入本地
      await AsyncStorage.setItem('userSession', JSON.stringify(sessionInfo));
      console.log('Session创建成功');
    } catch (err) {
      console.error('存储Session失败:', err);
    }
  };

  // 有参数时才执行创建逻辑
  if (data56 || backendSessionData) {
    createAndSaveSession();
  }
}, [data56, backendSessionData]);

后续获取Session的方法

在其他组件中读取存储的session：

const getCurrentSession = async () => {
  try {
    const sessionStr = await AsyncStorage.getItem('userSession');
    return sessionStr ? JSON.parse(sessionStr) : null;
  } catch (err) {
    console.error('获取Session失败:', err);
    return null;
  }
};

几点注意事项 #

• 优先使用后端返回的session相关数据（如token、用户认证信息），比前端传递的data56安全性和可靠性更高。
• React Navigation的参数传递适合小体量数据，如果data56体积过大，建议先存入本地再跳转，避免参数过大导致的异常。
• AsyncStorage是异步操作，必须使用async/await处理，不能同步调用。

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