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

Posted 2023-02-22

【中文标题】反应路由器不工作链接到标签

【英文标题】：React Router not working link to tag

【发布时间】：2018-01-18 05:47:47

【问题描述】：

我有三个 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。

【参考方案1】：

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

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

当您将 url 作为参数发送时，您需要在加载图像之前对 url 进行编码，并且您可以使用历史 API 更改路由，无需在某些状态更改时使用渲染方法中的 Link。我认为这种方法是错误的。我已将 loadOne 方法更新如下：

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

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

  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

【讨论】：

那么我应该在 FirstPage.js 中返回什么？我的意思是如何切换到 Panorama.js

您必须在 App.js 中更改 Route 路径。在 FirstPage.js 中，您不必维护这么多状态。您只能拥有图像状态，并且在加载时，您可以更新图像状态。

即使我这样做了，点击后屏幕上也不会出现图像

有没有办法从服务器的 URL 中隐藏 imageUrl

@Aayushi，我添加了 FirstPage.js 代码示例。请尝试联系。关于从 url 隐藏参数，我知道使用编码的 url 字符串。它们可能是历史 API 中的一些额外选项，您可以探索

【参考方案2】：

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

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

【讨论】：

路径匹配。我只是在所有 js 文件中调用 'id'

@Aayushi 路径通常以“/”开头，您是否也可以在链接和路径中使用“/:id”。看看这是否有效。

@Aayushi Switch 渲染第一个匹配的路径，所以您可以尝试将第二个路径移动到第一个位置。

什么意思？

反转路由顺序<Switch><Route path="/:id" component=Panorama /><Route exact path="/" component=FirstPage /> </Switch>