[英]passing parameters through react-router
我有一個顯示四個圖像的代碼,當從其中單擊一個圖像時,它將占據整個屏幕。我正在使用React Router來實現相同的圖像。 代碼就像這樣的App.js
import React from 'react';
import ReactDOM from 'react-dom';
import $ from 'jquery';
import {FirstPage} from './FirstPage.js';
import {Panorama} from './Panorama.js';
import {BrowserRouter,Route,Router,Switch} from 'react-router-dom';
class App extends React.Component{
constructor(props){
super(props);
}
render(){
return(
<div>
<BrowserRouter>
<Switch>
<Route path="/" component={FirstPage} />
<Route path="/image/:id" component={Panorama} />
</Switch>
</BrowserRouter>
</div>
)
}
}
ReactDOM.render(<App/>,document.getElementById('container'));
FirstPage.js
import React from 'react';
import ReactDom from 'react-dom' ;
import $ from 'jquery' ;
import {Panorama} from './Panorama.js';
import {Redirect} from 'react-router-dom';
class FirstPage extends React.Component{
constructor(props){
super(props);
this.state={
list:[],
images:[],
isClicked:false,
redirect:true
}
this.loadImages=this.loadImages.bind(this);
this.loadOne=this.loadOne.bind(this);
}
componentDidMount(){
window.addEventListener('load',this.loadImages);
}
loadImages(){
console.log("load");
var that=this;
$.ajax({
type:'GET',
url:'https://demo0813639.mockable.io/getPanos',
datatype:'jsonp',
success:function(result){
var images=that.state.images;
for(var i=0;i<result.length;i++){
that.state.images.push({"pano":result[i].pano,"name":result[i].name});
}
that.setState({
images:images
})
}
})
}
loadOne(pano){
this.setState({
isClicked:true,
imageUrl:pano
})
}
render(){
var list=this.state.list;
return this.state.isClicked?<Redirect to={'/image/${this.state.imageUrl}'}/>:
<div> {this.state.images.map((result)=>{
return(<div className="box">
<div className="label">{result.name}</div>
<img src={result.pano} className="image col-md-3" onClick={this.loadOne.bind(this,result.pano)}/>
</div>
)
})}
</div>
}
}
module.exports={
FirstPage:FirstPage
}
Panorama.js
import React from 'react';
import ReactDOM from 'react-dom';
import $ from 'jquery';
import {Link} from 'react-router-dom';
class Panorama extends React.Component{
render(){
return(
<div>
<div className="pano">
<img id="myImage" src={props.match.params.id} />
<div className="goback"><Link to="/">Go back</Link></div>
</div>
)
}
}
module.exports={
Panorama:Panorama
}
有了這個URL就變成這樣
http:// localhost:8080 / image / $%7Bthis.state.imageUrl%7D
點擊圖片后,屏幕上沒有任何顯示。
重定向到= {{pathname ='/ image',params:{this.state.imageUrl}}}
我收到語法錯誤
正確的做法是什么?
看起來您正在使用單引號而不是反引號to
prop內生成字符串。
嘗試改變
<Redirect to={'/image/${this.state.imageUrl}'}/>
至:
<Redirect to={`/image/${this.state.imageUrl}`}/>
您使用的react-router 3
,我建議你使用提供重定向功能react-router 3
,即this.context.router.push()
開始重定向。
組件中的示例代碼:
class FirstPage extends React.Component{
constructor(context)
{
super(context)
}
...
}
FirstPage.contextTypes = {
router: PropTypes.object.isRequired
}
react-router 3中的示例重定向動作:
this.context.router.push({ pathname: `/image${this.state.imageUrl}`})
react-router 4中的示例重定向動作:
this.context.router.history.push({ pathname: `/image${this.state.imageUrl}`})
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.