路由器在 React 中不起作用

Question

我正在使用 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
}

全景.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/> 不做任何事情的原因是因为从技术上讲，您仍然与图像框在同一页面上，因为您没有移动到另一条路径，因此链接不会触发路径更改。

我创建了一个快速示例，说明如何解决此问题。当然，它不是您项目的精确复制品，但它让您了解如何解决这个问题。

=== 解释

主应用

我们的主应用程序包含两条路线。一个用于选择图像，另一个用于查看图像。

查看图片

这将显示由 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"));