React Router: Erstellen Sie 'Link zu' Pfade von Objekten

Question

Ich habe einen Index von Bildern und Titeln, die ich aus der Dropbox API ziehe. Diese (wenn geklickt) erstellen und mounten bereits neue Komponenten. Ich versuche, react-Router in dieses Projekt zu integrieren, aber ich habe Mühe, Link to = Pfade mit dem Array, das ich bereits erstellt haben, zu generieren.

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> 

     ); 
    } 
} 

Wie Sie sehen, ich versuche, die gleiche Methode zu verwenden, wie ich zum Erzeugen der imageTitles haben, aber die href ist einfach „/“, wenn gemacht wird. Ist es möglich, auf diese Weise dynamisch Pfade zu generieren?

p.s. Ich habe versucht, den Code hier kurz zu halten, aber glücklich, in mehr Informationen bei Bedarf hinzuzufügen.

Answer 1

Nicht sicher, dass Sie sich dessen bewusst sind, aber Sie überschreiben 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 

Dann Sie versuchen, die Mitglieder der titles Array zu verbinden, aber es hält Mitglieder in diesem Format:

<p>{el}</p> 

Answer 2

Zuerst haben Sie eine Root-Klasse erstellen, wo Sie einige Pfade erklären wird, wie das folgende Beispiel

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

und dann mit browserHistory.push ("/ path") werden Sie zu http://host:port/path

navigieren