2017-05-31 62 views
0

我正在嘗試將React路由器用於反應原生項目。在我的index.js文件我有:ReactRouter:無法讀取未定義的屬性「imageId」

<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. 

所以我猜測道具不被傳入,但不知道在哪裏...感謝所有的幫助。

+0

什麼是網頁的URL,當你看到這個錯誤嗎? –

+0

嘗試將路由器中的路徑更改爲'/ images /:imageId'和鏈接到'/ images/7326'中的'to'。 –

+0

其反應本機應用程序,所以我不知道如何檢查url .. –

回答

0

在最新版本的react-router,我猜你正在使用的路線PARAMS可從match道具。因此,爲了得到imageId

使用

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

你可以試試這個

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