ReactRouter:无法读取未定义的属性“imageId”

IT技术 reactjs react-router
2021-05-02 05:47:01

我正在尝试将 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. 

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

1个回答

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

利用

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