Reactjs 如何通过路由器传递状态？

我正在从JSON文件获取冠军列表的数据，并试图创建一个链接来查看每个冠军，但不确定如何从react router传递链接中的img属性

我试着使用

state:champion.img

，但它什么也没给。你知道我如何传递图像值吗

import React, { Component } from 'react'
import axios from 'axios'
import { Link } from 'react-router-dom';
class PersonList extends Component {
    state = {
        persons: [],
        name:"",
           champs: [], 
           isLoaded: false,
        Aatrox:''
    }

    componentDidMount(){
        axios({
            method: 'get',
            url: 'https://api.myjson.com/bins/blcps'
        })
        .then(res => {
            this.setState({ persons: res.data[1]})


            console.log(res.data[0].name);
            console.log('ldldl');


             const champions = res.data.map((champion) => {
            console.log(champion.name)
            console.log(this.state.champs.name)
            return <div classname="container-fluid">
            <div classname="row">
            <p>ldldl</p>

              <h2 className="card-title">{champion.name}</h2>   </div> 

               <img src={champion.img} /> 

               <Link to={{ pathname:`/champions/${champion.name}`,// undefined  state: {champion.img} }} > {champion.name}  </Link>
</div> 


   })


          this.setState({ champs: champions, isLoaded: true });



        })


    }

    render() {
        return (
            <ul>
               {this.state.isLoaded ? <div>{this.state.champs}</div> : <div>.</div>}
            </ul>
        )
    }
}

export default PersonList;

import React，{Component}来自“React”
从“axios”导入axios
从'react router dom'导入{Link}；
类PersonList扩展了组件{
状态={
人员：[]，
姓名：“，
冠军：[]，
isLoaded:false，
Aatrox:'
}
componentDidMount（）{
axios({
方法：“get”，
网址：'https://api.myjson.com/bins/blcps'
})
。然后（res=>{
this.setState（{persons:res.data[1]}）
console.log（res.data[0].name）；
log（'ldldl'）；
const champions=res.data.map（（champion）=>{
console.log（champion.name）
console.log（this.state.champs.name）
返回
低密度脂蛋白

{champion.name}
{champion.name}
})
this.setState（{champs:champions，isLoaded:true}）；
})
}
render（）{
返回(

{this.state.isLoaded？{this.state.champs}.}

)
}
}
导出默认个人列表；

当您

console.log（champion.img）

时，您会得到完整的url吗？如果没有，您必须放置文件的完整url，而不仅仅是文件名，以使其工作。如何执行此操作取决于从服务器返回的内容。

尝试console.log（champion.img）检查输出，无论是未定义的还是未定义的，我都不知道如何将图像传递给不同的组件。我获取图像链接的完整url。您应该为处于状态的

champion.img

提供一个变量名。像这样

state:{img:champion.img}

然后使用

var img=this.props.location.state.img

检索值，或者将完整的champion作为state

{champion.name}传递

然后使用

var img=this.props.location.state.champion.img

进行检索，或者您可以将变量设置为

champion.img

并在状态中传递它，而不是

champion.img

。像这样吗？然后在其他组件变量img=this.props.location.state.img img src={img}