React传递Props问题：导航器配置是否有误？

作为React新手碰到这种跨组件参数传递的坑太正常了！你猜的没错，这大概率和导航器的参数传递逻辑有关——毕竟导航器管理的组件间的参数传递，和普通父子组件直接传props的规则完全不一样。我来给你拆解下常见问题点和解决办法：

1. 先确认Login组件的跳转参数传递方式 #

首先得保证你在Login里跳转到Main时，是用导航器的navigate方法带参数跳转，而不是像普通组件那样直接写<Main xxx="xxx" />。正确写法应该是这样：

// Login组件里的跳转代码示例
navigation.navigate('Main', { 
  userData: { id: 1, name: '测试用户' } // 这里放你要传递的参数，键名自定义
});

注意这里的第二个参数就是你要传递的参数对象，键名可以随便取，但后面要和Main里取的对应上。

2. 在Main组件里正确获取导航参数 #

在Main组件里，不能直接用props.xxx拿导航参数！得根据你用的React Navigation版本来：

• 如果是React Navigation 5/6+版本，用route对象获取：

// 函数式组件的写法
function Main({ route }) {
  // 加个默认值，防止没传参数时崩溃
  const { userData = {} } = route.params || {}; 
  console.log(userData); // 现在应该能正常打印参数了

  return (
    // 你的组件内容
  );
}

• 如果是类组件，就用this.props.route.params：

class Main extends React.Component {
  render() {
    const { userData = {} } = this.props.route.params || {};
    return (
      // 组件内容
    );
  }
}

加|| {}和默认值就是为了避免你碰到的undefined is not an object崩溃问题，毕竟如果没传参数的话，route.params会是undefined，直接解构就会报错。

3. 检查导航器的配置是否正确 #

还要确认你的导航栈配置里，Main组件的注册名称和跳转时的名称完全一致，比如Stack导航器的配置：

const Stack = createStackNavigator();

function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator initialRouteName="Login">
        <Stack.Screen name="Login" component={Login} />
        <Stack.Screen name="Main" component={Main} />
        {/* 注意这里的name属性要和navigate('Main')里的字符串完全匹配，大小写也不能错！ */}
      </Stack.Navigator>
    </NavigationContainer>
  );
}

很多新手会在这里写错名称，导致跳转时找不到页面，或者参数传不过去。

4. 排除其他小坑 #

• 如果你用的是React Router而不是React Navigation，参数获取要用useParams()钩子或者props.match.params，逻辑类似但写法不同。
• 检查下跳转时的参数键名和Main里解构的键名是不是完全一致，比如Login里传的是userInfo，Main里却写userData，肯定拿不到值！

你可以先按这个顺序排查，尤其是跳转传参和Main里的参数获取方式，应该能解决你碰到的undefined或者崩溃问题。

内容的提问来源于stack exchange，提问作者J. Doe