反應路由器：創建從對象創建'鏈接'路徑

我有一個索引圖像和標題，我從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.我試圖保持代碼簡潔，但很高興在需要時添加更多信息。

來源

2017-09-05 r_cahill

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

'titles [i]'should should'

title one

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

不知道你是否知道這一點，但你重寫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>

來源

2017-09-05 13:37:12

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

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

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

，然後用browserHistory.push（「/路徑」）你將導航到http://host:port/path

來源

2017-09-05 13:42:19

反應路由器：創建從對象創建'鏈接'路徑

回答

相關問題