Question

我有一个从Dropbox api中提取的图像和标题索引。这些（单击时）已经创建并安装新组件。我正在尝试将react-router集成到这个项目中，但我正在努力使用我已经创建的数组生成 Link to = 路径。

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

首先，您必须创建一个Root类，您将在其中声明一些路径，如下例

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

然后使用browserHistory.push（“/ path”），您将导航到http://host:port/path

反应路由器：从对象创建“链接到”路径

2 个答案: