通过 react-router 传递参数答案

【问题标题】：passing parameters through react-router通过 react-router 传递参数
【发布时间】：2017-08-07 01:42:10
【问题描述】：

我有一个显示四个图像的代码，当从中单击一个图像时，它会占据整个屏幕。我正在使用反应路由器来实现相同的功能。代码是这样的应用.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
}

全景.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}}}

我收到语法错误

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

【问题讨论】：

标签： javascript reactjs react-router react-router-v4 react-router-dom

【解决方案1】：

看起来您使用单引号而不是反引号在 to 属性中生成字符串。

尝试改变

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

到：

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

【讨论】：

【解决方案2】：

你在使用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}`})

【讨论】：

不，我使用的是 React v4