通过反应路由器传递参数

问题描述：

我有一个代码，显示四个图像，当一个图像被点击出这些时，它占用整个屏幕。我使用反应路由器来实现相同的。的代码是这样的 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

后点击图像并没有什么上的screen.With这个大作，

重定向到= {{路径= '/形象'， PARAMS：{this.state.imageUrl}}}

我得到的语法错误

什么是这样做的正确方法是什么？

答

它看起来像你使用单引号而不是back-ticks来产生你的to道具中的字符串。

尝试改变

<Redirect to={'/image/${this.state.imageUrl}'}/>

到：您使用的react-router 3我建议你使用重定向由react-router 3提供功能

<Redirect to={`/image/${this.state.imageUrl}`}/>

由于它的工作 – Aayushi

答

，即this.context.router.push()开始重定向。在组分

示例代码：在

class FirstPage extends React.Component{ 
constructor(context) 
{ 
    super(context) 
} 
... 
} 
FirstPage.contextTypes = { 
    router: PropTypes.object.isRequired 
}

样品重定向动作反应路由器3：在反应的路由器4

this.context.router.push({ pathname: `/image${this.state.imageUrl}`})

样品重定向动作：

this.context.router.history.push({ pathname: `/image${this.state.imageUrl}`})

不，我正在使用React v4 – Aayushi

通过反应路由器传递参数

相关推荐