React Router 无法使用 link 标记

Question

我有三个js文件。 parent 我要调用 child classes。代码是这样的。

这是parentclassApp.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 调用并在 screen.If 上加载四张图片，点击其中一张图片，应该使用该图片的 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 router 版本为 v4.

Answer 1

您的路径需要与您调用的路径相匹配。将您的第二条路线更改为：

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

Answer 2

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

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

As you are sending the url as parameter, you need to encode the url before loading image, and you can change the route using history API, no need to use the Link in your render method on some state change. I think the approach is wrong. I have updated the loadOne method as below:

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

In Panorama Component, you can decode the url and load the image.

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

FirstPage.js

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
}

React Router 无法使用 link 标记

React Router not working link to tag

reactjs

react-router

react-router-component

react-router-v4

react-router-dom