react router- nothing coming up on the screen

Question

I have a code which loads four images on the screen and on clicking on one of the images, it displays the whole image on the screen. For the purpose of navigation, I am using a react-router.The code goes 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 where the ajax call is getting made

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,
        imageUrl:''
      }
      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 for displaying a single image on the screen

import React from 'react';
import ReactDOM from 'react-dom';
import $ from 'jquery';
import 'aframe';
import 'aframe-particle-system-component';
import {Entity, Scene} from 'aframe-react';
import {Link} from 'react-router-dom';

class Panorama extends React.Component{
    render(){
      return( 
        <div>
          <img src={props.match.params.id}/>
          </div>
        )
    }
  }

module.exports={
  Panorama:Panorama
}

The problem is that there aren't any errors on the screen but still after clicking on an image,the image is not getting rendered on the screen.What am I doing wrong here? The version of react-router that I am using is v4.

where is imageUrl state? – Hana Alaydrus Aug 08 '17 at 07:38 — Hana Alaydrus, Aug 08 '17 at 07:38
You forget use "this" `` Check debug console output. – Vitaliy Smolyakov Aug 08 '17 at 08:58 — Vitaliy Smolyakov, Aug 08 '17 at 08:58

score 0 · Answer 1 · answered Aug 08 '17 at 07:42

0

My sugesstion is to fix the router from

<Route path="/" component={FirstPage} />

To

<Route exact path="/" component={FirstPage} />

By setting this it will prevent any router that contain / to render FirstPage

answered Aug 08 '17 at 07:42

Hana Alaydrus

2,225
16
19

The router is navigating but I am not getting any images on the screen. The URL also is changing. I have attached the screenshots of the behavior. Please check – Aayushi Aug 08 '17 at 07:56

score 0 · Answer 2 · answered Aug 08 '17 at 09:20

Two things, instead of using Redirect after setting a state, you can dynamically route to the URL using history.push method. Also Panorama component is a statefull component and hence props are available like this.props .however I dont see you having any logic in it, so its better to have it as a functional component

See this answer to dynamically route using history.push()

export const Panorama = (props) => {
      return( 
        <div>
          <img src={props.match.params.id}/>
          </div>
        )
  }

Code:

import {withRouter} from 'react-router';
class FirstPage extends React.Component{
    constructor(props){
      super(props);
      this.state={
        list:[],
        images:[],
        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.props.history.push(`/image/${pano}`)
   }

  render(){
    var list=this.state.list;

    return <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>
  }
}

export withRouter(FirstPage);

It doesn't work after that too!Instead now I cannot navigate! — Aayushi, Aug 08 '17 at 12:12

react router- nothing coming up on the screen

2 Answers2