passing parameters through react-router

Question

I have a code which displays four images and when one image is clicked out of those, it takes up the whole screen.I am using react router to implement the same. The code is like this 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
}

With this the URL becomes something like this

http://localhost:8080/image/$%7Bthis.state.imageUrl%7D

after clicking on an image and nothing comes up on the screen.With this,

Redirect to={{pathname='/image',params:{this.state.imageUrl}}}

I get syntax errors

What is the correct way of doing this?

Answer 1

are you using react-router 3 i recommend you to use redirect function provided by react-router 3, that is this.context.router.push() to start redirect.

sample code in component :

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

sample redirect action in react-router 3 :

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

sample redirect action in react-router 4 :

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

Answer 2

It looks like you are using single quotes instead of back-ticks to produce the string inside your to prop.

Try changing

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

to:

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