react-router-native中从Link获取props对象？传递state后取值为undefined

我帮你排查几个常见的原因和对应的解决办法，应该能解决你的问题：

1. 确认目标组件已接入路由上下文 #

如果你的目标组件（比如Dialog组件）没有被<Route>组件直接渲染，或者没有通过路由高阶组件注入路由相关props，那this.props.location自然会是undefined。

解决办法：

• 如果你用的是类组件，用withRouter高阶组件包裹你的组件：

import { withRouter } from 'react-router-native';

class Dialog extends React.Component {
  componentDidMount() {
    // 现在可以正常获取state了
    console.log(this.props.location.state?.detail);
  }

  render() {
    return <Text>{this.props.location.state?.detail}</Text>;
  }
}

// 用withRouter包裹后导出
export default withRouter(Dialog);

• 如果你用的是函数组件，直接使用useLocation钩子：

import { useLocation } from 'react-router-native';

function Dialog() {
  const location = useLocation();
  console.log(location.state?.detail);

  return <Text>{location.state?.detail}</Text>;
}

export default Dialog;

2. 检查路由配置是否正确 #

确保你的/dialog路由已经正确配置在<NativeRouter>内部，并且目标组件是通过<Route>渲染的，而不是直接手动引入组件：

import { NativeRouter, Route } from 'react-router-native';
import Dialog from './Dialog';

function App() {
  return (
    <NativeRouter>
      {/* 正确的路由配置 */}
      <Route path="/dialog" component={Dialog} />
      {/* 错误示例：直接渲染组件不会注入路由props */}
      {/* <Dialog /> */}
    </NativeRouter>
  );
}

3. 确认state传递的完整性 #

虽然你的Link写法是正确的，但可以额外检查几个点：

• 确保message变量不是undefined或null，可以在渲染Link前先打印message确认值存在；
• 如果是嵌套路由，确认pathname是否正确（比如是否需要写/parent/dialog而不是/dialog）；
• 避免在跳转后触发路由重置逻辑，这可能会导致state丢失。

4. 排查路由版本兼容问题 #

如果你的react-router-native版本较老，可能存在一些state传递的bug，可以尝试升级到最新稳定版本：

npm install react-router-native@latest
# 或者用yarn
yarn add react-router-native@latest

按照上面的步骤排查，应该就能解决location.state为undefined的问题了。

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