Reactjs 返回按钮不可用'；不要向后导航

我的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';
    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'));

从“React”导入React；
从“react dom”导入react dom；
从“jquery”导入美元；
从“./FirstPage.js”导入{FirstPage}；
从“./Panorama.js”导入{Panorama}；
从“react Router dom”导入{BrowserRouter，Route，Router，Switch}；
var BrowserHistory=require（'react-router/lib/BrowserHistory'）。默认值；
类应用程序扩展了React.Component{
建造师（道具）{
超级（道具）；
}
render（）{
返回(
)
}
}
ReactDOM.render(

但单击按钮后，它将导航到localhost，但div元素变为空。

控制台中没有错误，react router的版本为v4

“加载”事件只触发一次，因为打开的窗口不再应用打开窗口应用的加载事件。请将FirstPage.js中的componentDidMount更新为：

应避免按以下方式更改状态：

for（var i=0；i控制台中是否有错误？无错误@mayankshukla返回导航后，流是否进入loadImages（）。我认为在按下“返回”按钮后，它不会进入loadImages。添加调试器并check@Aayushi不要使用BrowserHistory。请尝试从BrowserRouter中删除历史道具。
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
}

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
}

componentDidMount(){
  this.loadImages()
}

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