リアクタルーター：オブジェクトから 'リンク先'パスを作成する

Question

私は画像とタイトルのインデックスを持っています。私はDropbox APIから引き出しています。これらは（クリックされると）既に新しいコンポーネントを作成してマウントします。私はこのプロジェクトに反応ルータを統合しようとしていますが、すでに作成した配列を使用してへのリンクを作成するのに苦労しています。

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.私はここでコードを簡潔に保つために努力しましたが、必要に応じてさらに情報を追加して幸せです。

Answer 1

あなたはそれを認識していますが、あなたは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> 

Answer 2

まず、あなたがのようないくつかのパスを宣言しますルートクラスを作成する必要がありますたとえば、以下の

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

、その後browserHistory.push（ "/パス"）とあなたはhttp://host:port/path

に移動します