Routeur ne fonctionne pas dans React

Question

J'utilise BrowserRouter de réagir à travers lequel je veux naviguer entre les pages. Initialement, il y a quatre images dans une page, et après avoir cliqué sur une image, l'image s'ouvre dans l'écran. Il y a un bouton de retour en dessous de cette image, qui ramène l'utilisateur au premier écran avec quatre images.

Le code est comme ce

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 
} 

Il n'y a pas d'erreurs pour le code ci-dessus, mais il le fait ne fonctionne pas aussi. La version du routeur de réaction est v4. Quel est le problème ci-dessus?

Answer 1

Il semble que vous n'utilisiez pas vraiment React Router ici. La raison pour laquelle le <Link/> ne fait rien est parce que vous êtes techniquement toujours sur la même page que votre boîte d'image, puisque vous ne passez pas à un autre chemin, donc le lien ne déclencherait pas de changement de chemin.

J'ai créé un exemple rapide sur la façon de résoudre ce problème. Bien sûr, ce n'est pas une réplique exacte de votre projet, mais cela vous donne une idée de la façon dont vous pouvez résoudre ce problème.

Explication ===

Main App

Notre application principale se compose de deux routes. Un pour sélectionner une image et l'autre pour visualiser une image.

Voir l'image

Cette affiche une image qui a été envoyé à travers le premier composant de la page. C'est une façon de le faire, mais vous pouvez également stocker des images et des images actives dans le composant App et les envoyer à ce composant enfant afin que vous n'ayez pas à conserver l'URL de l'image dans le paramètre. (OU vous pouvez utiliser Redux ou un autre gestionnaire d'état global).

Première page

Nous liste une série d'images au moyen d'un simple tableau et garder un index actif de l'image de sélection. Nous les mappons à la vue via des boutons et déclenchons un événement une fois qu'ils ont été cliqués sur ce qui définit l'image active et l'indicateur de redirection qui redirigera l'utilisateur vers l'itinéraire image/:id avec l'URL de l'image.

Bien sûr, votre chargement d'images peut être amélioré mais c'est hors de portée pour cette question.

Voir version de travail ici: https://codesandbox.io/s/pY2LyzAEr

=== Source

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