0

我有三個js文件。父母我要打電話給孩子們。代碼是這樣的。反應路由器不工作鏈接到標記

這是父類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 exact path="/" component={FirstPage} /> 
       <Route path=":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); 
    this.setState({ 
     isClicked:true, 
     imageUrl:pano 
    }) 
    //this.props.history.push(`/image/${pano}`) 
    } 

    render(){ 
    var list=this.state.list; 
    console.log("Image URL: "+this.state.imageUrl); 
    return this.state.isClicked?<Link to={`${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 
} 

本頁面使Ajax調用並加載在screen.If四象點擊在其中一個圖像上,應該使用該圖像的ID調用另一個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(){ 
     console.log("Image: "+ props.match.params.id); 
     return( 
     <div> 
      <img src={`${props.match.params.id}`}/> 
      </div> 
     ) 
    } 
    } 

module.exports={ 
    Panorama:Panorama 
} 

雖然我在控制檯中沒有錯誤,點擊圖像後一無所獲即將在屏幕上。代碼有什麼問題?

React路由器的版本是v4

回答

1

第一件事,你需要做的是@Fawaz建議,更新您的路線

<Route path="/panorama/:imageUrl" component={Panorama} /> 

當您發送URL作爲參數,則需要在加載圖像之前對URL進行編碼,並且您可以使用歷史記錄API更改路由,無需在渲染方法中使用鏈接進行某些狀態更改。我認爲這種做法是錯誤的。我已經更新,如下loadOne方法:

loadOne(pano){ 
    let imageUrl = encodeURIComponent(pano); 
    this.props.history.push(`/panorama/${imageUrl}`); 
    } 

在全景組件,可以解碼的URL和加載圖像。

render() { 
    let url = decodeURIComponent(this.props.match.params.id); 
    return( 
     <div> 
     <img src={`${url}`}/> 
     </div> 
    ) 
    } 

FirstPage.js

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={ 
     images:[] 
    } 
    this.loadImages=this.loadImages.bind(this); 
} 
componentDidMount(){ 
    window.addEventListener('load',this.loadImages); 
} 

loadImages(){ 
    var that=this; 
    $.ajax({ 
    type:'GET', 
    url:'https://demo0813639.mockable.io/getPanos', 
    datatype:'jsonp', 
    success:function(result){ 
     that.setState({ 
     images:result // I am assuming, result is array of objects. 
    }) 
    } 
    }) 
} 

loadOne(pano){ 
    let imageUrl = encodeURIComponent(pano); 
    this.props.history.push(`/panorama/${imageUrl}`); 
} 

render(){ 
    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> 
    } 
} 

module.exports={ 
    FirstPage:FirstPage 
} 
+0

那麼,我應該在FirstPage .js?我的意思是如何切換到Panorama.js – Aayushi

+0

您必須更改App.js中的路徑路徑。在FirstPage.js中,你不必保持這麼多狀態。您只能擁有圖像狀態,並且在加載時可以更新圖像狀態。 – Dev

+0

即使我這樣做,點擊 – Aayushi

0

您的路徑需要與您打電話的路徑相匹配。改變你的第二路線:

<Route path="/image/:id" component={Panorama} /> 
+0

的路徑匹配。我只是在所有js文件中調用'id' – Aayushi

+0

@Aayushi路徑通常以'/'開頭,你可以在鏈接和路徑中使用'/:id'。看看是否有效。 – Fawaz

+0

即使這樣也行不通@Fawaz – Aayushi