反应路由器：无法读取未定义的属性“图像 ID”答案

【问题标题】：ReactRouter: Can not read property "imageId" of undefined反应路由器：无法读取未定义的属性“图像 ID”
【发布时间】：2017-11-01 19:17:18
【问题描述】：

我正在尝试将 React Router 用于 react-native 项目。在我的 index.js 文件中，我有：

  <NativeRouter>
    <View>
      <Route path="/" component={MainComponent} />
      <Route path="/images/:imageId/" component={ShowImage} />
    </View>
  </NativeRouter>

在 DisplayComponent 我有：

    <View}>
      {items.map( item => {
        return (
          <Link to="images/7326" key={item.id}>
            <Image
              source={{uri: 'https://someImageLink...'}}
            />
          </Link>
        )
      })}
    </View>

显示图像如下所示：

export default class ShowImage extends Component {
  render() {
    return (
      <View>
        <Text>{this.props.params.imageId}</Text>
     </View>
   );
 }
}

当我点击加载的图片时，出现以下错误：

can not read "imageId" of undefined.

所以我猜道具没有被传递，但无法弄清楚在哪里......感谢所有帮助。

【问题讨论】：

看到错误时页面的 URL 是什么？
尝试将路由器中的path更改为/images/:imageId，将链接中的to更改为/images/7326
它是一个 react-native 应用所以我不知道如何检查 url..

标签： reactjs react-router

【解决方案1】：

我猜你正在使用的react-router 的最新版本中，路由参数可从match 属性中获得。所以为了得到imageId

使用

  <Text>{this.props.match.params.imageId}</Text>

【讨论】：