2017-09-05 15 views
0

我有一個索引圖像和標題,我從Dropbox API拉入。這些(點擊時)已經創建並安裝新組件。我試圖將react-router整合到這個項目中,但我正在努力生成鏈接到=使用我已經創建的數組的路徑。反應路由器:創建從對象創建'鏈接'路徑

import { BrowserRouter, Route, Link } from 'react-router-dom' 

//titles variable created via api 
var titles=["title one","title two","title three",...] 


class Index extends React.Component{ 

    render(){ 
     if(!this.props.imageSource.length) 
      return null; 
      let titles = this.props.imageTitles.map((el, i) => <p>{el}</p>) 
      let images = this.props.imageSource.map((el, i) => 

       <div className="imageContainer"> 
        <img key={i} className='indexImages' src={el} onClick = {this.props.indexTitleClick.bind(this,titles[i])}/> 
        <Link to={titles[i]} className="imageTitle" onClick = {this.props.indexTitleClick.bind(this,titles[i])}>{titles[i]}</Link> 
       </div> 
      ) 



     return (
      <div className="indexWrapper"> 
       {images} 
      </div> 

     ); 
    } 
} 

正如你可以看到我試圖用同樣的方法,因爲我有產生imageTitles,但href是簡單的「/」渲染時。是否有可能以這種方式動態生成路徑?

p.s.我試圖保持代碼簡潔,但很高興在需要時添加更多信息。

+0

'this.props.imageTitles'看起來像什麼? –

+0

'titles [i]'should should'

title one

''我認爲這不是一個有效的'to'支持。更改變量名稱標題和titleshml或類似 – bennygenel

回答

2

不知道你是否知道這一點,但你重寫titles

var titles=["title one","title two","title three",...] // from outside your component 
let titles = this.props.imageTitles.map((el, i) => <p>{el}</p>) // inside render 

然後,您試圖鏈接到titles陣列的成員,但它持有該格式成員:

<p>{el}</p> 
+0

好點,OP如果你使用了一個const而不是var,你會很快捕獲這個錯誤 – Nath

0

首先,你必須創建一個根類,你會宣佈像一些路徑下面的例子

<Router history={browserHistory} >    
    <Root path="/:pathVariable" component={ComponentClass}/>   
</Router> 

,然後用browserHistory.push( 「/路徑」)你將導航到http://host:port/path