react router-屏幕上沒有任何東西

Question

我有一個代碼，它在屏幕上加載四個圖像並點擊其中一個圖像，它將在屏幕上顯示整個圖像。對於導航的目的，我使用的是反應-router.The代碼是這樣的： 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了AJAX調用得到由

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 
} 

全景。 JS在屏幕上顯示一個圖像

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 
} 

的問題是，有沒有在屏幕上的任何錯誤，但還是點擊圖片後，圖像沒有得到重在屏幕上查找。我在這裏做錯了什麼？ 我使用的react-router版本是v4。

Answer 1

我sugesstion是從

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

修復路由器 要

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

通過設置這將阻止包含/呈現第一頁

Answer 2

任何兩個路由器事情，而不是使用Redirect af ter設置狀態，則可以使用history.push方法動態路由到URL。此外Panorama組件是statefull成分，因此道具都可以像this.props。但是我沒有看到你對它有任何邏輯，所以它能夠更好地把它作爲一個功能組件

見this answer動態路由使用history.push()

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

代碼：

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);