戻るボタンはバック

Question

すべてのルーティングはこのページでは、画面上にいくつかの画像をロードし

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'; 
    var BrowserHistory = require('react-router/lib/BrowserHistory').default; 

    class App extends React.Component{ 
     constructor(props){ 
      super(props); 
     } 

     render(){ 
      return(
      <div> 
       <BrowserRouter history={BrowserHistory}> 
       <Switch> 
        <Route exact path="/" component={FirstPage} /> 
        <Route path="/panorama/: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,Link} from 'react-router-dom'; 
import {withRouter} from 'react-router'; 

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){ 
    console.log("pano: ",pano); 
    let imageUrl=encodeURIComponent(pano); 
    this.setState({ 
     isClicked:true, 
     imageUrl:pano 
    }) 
    this.props.history.push(`/panorama/${imageUrl}`) 
    } 

    render(){ 
    var list=this.state.list; 
    console.log("Image URL: "+this.state.imageUrl); 
    list=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> 
      ) 

     }) 

    return <div>{list}</div> 
    } 
} 

module.exports={ 
    FirstPage:FirstPage 
} 

に行われているところからApp.jsのための私のコードをナビゲートしません。それらのいずれかをクリックすると、フルスクリーンモードになります。イメージと戻るリンクが画面に表示されます。

import React from 'react'; 
import ReactDOM from 'react-dom'; 
import $ from 'jquery'; 
import {Link} from 'react-router-dom'; 

class Panorama extends React.Component{ 
    constructor(props){ 
    super(props); 
    this.goback=this.goback.bind(this); 
    } 
    goback(){ 
    this.props.history.push('/'); 
    } 
    render(){ 
     let url=decodeURIComponent(this.props.match.params.id); 
     return( 
     <div className="pano"> 
       <img id="myImage" src={`${url}`} crossorigin="anonymous"/> 

      <div className="goback" onClick={this.goback}>Go back</div> 
      </div> 
     ) 
    } 
    } 


module.exports={ 
    Panorama:Panorama 
} 

私はlocalhost：8080でコードを実行しています。 戻るボタンをクリックすると、URLがlocalhost：8080に変更されますが、空のページが表示され、FirstPage.jsが表示されます。 はデバッグ中、私は当初FirstPage.js

のコードで書かれているように私のhtml要素が4つのdiv要素を持っている。しかし、私はボタンをクリックした後、それはlocalhostにナビゲートしますがdiv要素が空になることがわかりました。

コンソールにエラーはなく、react-routerのバージョンはv4です。

Answer 1

'読み込み'イベントは、開いたウィンドウが開いているウィンドウが開いているウィンドウに適用されたロードイベントをもはや持たないため、一度だけ起動されます。あなたは以下のように状態を変更することは避けてください

componentDidMount(){ 
    this.loadImages() 
} 

：にcomponentDidMount FirstPage.jsでを更新してください

for(var i=0;i<result.length;i++){ 
    that.state.images.push({"pano":result[i].pano,"name":result[i].name}); 
}