路由器不能在React中工作

Question

我正在使用瀏覽器路由器的反應，通過它我想瀏覽頁面。最初在頁面中有四個圖像，點擊一個圖像後，圖像在屏幕上打開。該圖像下方有一個後退按鈕，用戶可以用四個圖像導航回第一個屏幕。

的代碼是這樣的

App.js

import React from 'react'; 
import ReactDOM from 'react-dom'; 
import $ from 'jquery'; 
import {FirstPage} from './FirstPage.js'; 
import {BrowserRouter,Route,Router} from 'react-router-dom'; 

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

    render(){ 
     return(
     <div> 
      <BrowserRouter> 
      <Route path="/" component={FirstPage}><FirstPage/></Route> 
      </BrowserRouter> 
     </div> 
     ) 
    } 
    } 

ReactDOM.render(<App/>,document.getElementById('container')); 

FirstPage.js

class FirstPage extends React.Component{ 
    constructor(props){ 
     super(props); 
     this.state={ 
     list:[], 
     images:[], 
     isClicked:false 
     } 
     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; 

    if(this.state.isClicked===false){ 
     list=this.state.images.map((result)=>{ 
      //console.log(result.name); 
     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> 
      ) 

     }) 
    } 
    else{ 
     list.push(<Panorama imageUrl={this.state.imageUrl}/>) 
    } 

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

    } 
    } 


module.exports={ 
    FirstPage:FirstPage 
} 

Panorama.js

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> 
     <div className="pano"> 
      <Scene> 
      <a-assets position="5 5 5"> 
       <img id="myImage" src={this.props.imageUrl} crossorigin="anonymous"/> 
      </a-assets> 
       <a-sky src="#myImage"></a-sky> 
      </Scene> 
      </div> 
      <div className="goback"><Link to="/">Go back</Link></div> 
      </div> 
     ) 
    } 
    } 

module.exports={ 
    Panorama:Panorama 
} 

有沒有任何錯誤上面的代碼，但它確實不工作。反應路由器的版本是v4。上面有什麼錯誤？

Answer 1

看起來好像你並沒有在這裏真正利用React Router。 <Link/>之所以沒有做任何事情，是因爲你在技術上仍然與圖像框在同一頁面上，因爲你沒有移動到另一條路徑，因此鏈接不會觸發路徑更改。

我已經創建了一個關於如何解決此問題的快速示例。當然，這不是您的項目的完全複製品，但它可以讓您瞭解如何解決此問題。

===說明

主要應用

我們主要的應用程序包括兩個路線。一個用於選擇圖像，另一個用於查看圖像。

查看圖像

這顯示已穿過由第一頁組件發送的圖像。這是一種方法，但您也可以將圖像和活動圖像存儲在App Component中，並將其發送到此子組件，以便您不必將圖像url保留在參數中。 （或者你可以使用Redux或其他全局狀態管理器）。

第一頁

我們通過一個簡單的數組列表的一系列圖像，並保持選擇圖像的活躍指數。我們通過按鈕將這些視圖映射到視圖，並在觸發事件後觸發一個事件，該事件設置活動圖像和重定向標誌，將用戶重定向到帶有圖像url的image/:id路線。

當然，您的圖像加載可以改善，但這超出了這個問題的範圍。

查看這裏工作版本：https://codesandbox.io/s/pY2LyzAEr

===來源

import React from 'react'; 
 
import { render } from "react-dom"; 
 
import { BrowserRouter, Route, Router, Redirect, Switch, Link } from 'react-router-dom'; 
 

 
// *------------------------- 
 
// | First Page 
 
// *------------------------- 
 
class FirstPage extends React.Component{ 
 
    state = { 
 
    currentActive: null, 
 
    redirect: false, 
 
    images: ['https://cdn.pixabay.com/photo/2014/12/22/10/04/lion-577104__340.jpg', 'http://www.yosemite.com/wp-content/uploads/2013/07/Merced-Lake-back-of-Half-Dome_Kenny-Karst.jpg', 'http://www.japan-guide.com/g9/3060_12.jpg', 'https://cache-graphicslib.viator.com/graphicslib/thumbs674x446/3675/SITours/hong-kong-island-half-day-tour-in-hong-kong-114439.jpg'] 
 
    } 
 
    viewImage = (evt) => { 
 
    this.setState({ 
 
     currentActive: evt.target.dataset.image, 
 
     redirect: true 
 
    }) 
 
    } 
 
    render(){ 
 
    return this.state.redirect 
 
     ? <Redirect to={`/image/${btoa(this.state.images[this.state.currentActive])}`} /> 
 
     : (
 
     <div> 
 
      {this.state.images.map((image, index) => { 
 
      return <button key={index} data-image={index} onClick={this.viewImage}>View Image {index + 1}</button> 
 
      })} 
 
     </div> 
 
    ) 
 
    } 
 
} 
 

 
// *------------------------- 
 
// | View Image Component 
 
// *------------------------- 
 
const ViewImage = (props) => { 
 
    return (
 
    <div> 
 
     <img src={`${atob(props.match.params.id)}`} /> 
 
     <div><Link to="/">Back</Link></div> 
 
    </div> 
 
) 
 
} 
 

 
// *------------------------- 
 
// | Main App.JS 
 
// *------------------------- 
 
class App extends React.Component { 
 
    render(){ 
 
    return(
 
     <div> 
 
     <BrowserRouter> 
 
      <Switch> 
 
      <Route exact path="/" component={FirstPage}/> 
 
      <Route path="/image/:id" component={ViewImage}/> 
 
      </Switch> 
 
     </BrowserRouter> 
 
     </div> 
 
    ) 
 
    } 
 
} 
 

 
render(<App />, document.getElementById("root"));