Reactjs 反应路由器不工作链接到标签

我有三个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调用并在屏幕上加载四个图像。如果单击其中一个图像，则应使用该图像的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。

您的路径需要与您正在呼叫的路径匹配。将第二条路线更改为：

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

您需要按照@Fawaz的建议做的第一件事就是更新您的路线

在全景组件中，您可以解码url并加载图像

FirstPage.js

---

路径匹配。我只是在所有js中调用“id”files@Aayushi路径通常以“/”开头，您可以在链接和路径中使用“/：id”。看看这是否有效。@Aayushi开关会呈现匹配的第一条路径，因此您可以尝试将第二条路径移动到第一个位置。您的意思是什么？颠倒路径顺序，那么我应该在FirstPage.js中返回什么？我的意思是如何切换到Panorama.js您必须在App.js中更改路由路径。在FirstPage.js中，您不必维护这么多状态。您只能有图像状态，并且在加载时，您可以更新图像状态。即使我这样做，在单击后屏幕上也不会出现图像。是否有方法从服务器的URL@Aayushi，我添加了FirstPage.js代码示例。请尝试联系。关于从url隐藏参数，我知道使用编码的url字符串。它们可能是历史api中的一些附加选项，您可以对此进行探索

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

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

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

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
}