ReactRouter: unable to read property "imageId" from undefined

Question

I am trying to use a React Router for an initiative project. In my index.js file, I have:

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

And in DisplayComponent I have:

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

And the image will look like this:

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

When I click on the downloaded image, I get the following error:

can not read "imageId" of undefined. 

So, I assume that the props are not passed, but I can not understand where ... Thanks for all the help.

Answer 1

In the latest version react-routerthat I intend to use, route parameters are available from matchprop. Therefore, to getimageId

Using

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

Answer 2

you can try this

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