路由器在React中不工作

Question

我正在使用react的BrowserRouter，我想通过它在页面之间导航。最初，一个页面中有四个图像，单击其中一个图像后，该图像将在屏幕上打开。在该图像下面有一个后退按钮，它将用户导航回具有四个图像的第一个屏幕。

代码如下所示

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
}

上面的代码没有任何错误，但它也不能工作。react路由器的版本为v4。上面的问题是什么？

Answer 1

看起来你在这里并没有真正的利用React Router。<Link/>不执行任何操作的原因是，从技术上讲，您仍然与图像框在同一页面上，因为您不会移动到另一个路径，因此该链接不会触发路径更改。

我已经创建了一个快速示例，告诉您如何解决此问题。当然，它不是你项目的复制品，但它可以让你了解如何解决这个问题。

===说明

主应用程序

我们的主应用程序由两个路由组成。一个用于选择图像，另一个用于查看图像。

查看图像

这将显示由First Page组件发送的图像。这是一种方法，但您也可以将图像和活动图像存储在App组件中，并将其发送到此子组件，这样您就不必在参数中保留图像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"));

​