2.Link跳转-get传id值

Link传id—通过事件传参的方法传id

事件传参：https://www.yuque.com/u238997/wuotii/zt6eab

import React, { Component } from 'react';
import './Movie.css'
class Movie extends Component {
    constructor(props){
        super(props);
        this.state={
            subjects:[]
        }
    }
    render() {
     return (
       <div className="container">
         {this.state.subjects.map(item=>{
          return(<div className="list" key={item.id} 
            onClick={this.handleClick.bind(this,item.id)}>   //通过事件传参将id传到详情页
          <img className="pic" src={item.images.small}></img>
          <p className="title">{item.title}</p>
         </div>)
       })}
      </div>
    );
 }
    componentDidMount() {
        var url="http://douban.uieee.com/v2/movie/top250"
        this.$http.get(url).then(res=>{
           var subjects=res.data.subjects;
           this.setState({
               subjects
           })
        })
    }
    handleClick(id){
        this.props.history.push(`/moviedetail?id=${id}`)
    }
}
export default Movie;

详情页接收id this.props.location.search

query-string解析get传值

//1.安装
yarn add query-string
//2.detail页面导入
import queryString from 'query-string'
//3.detail页面接收id
componentDidMount() {
   var id=queryString.parse(this.props.location.search) ;   //取到的是对象
        console.log(id)
        var id=id.id;    //取id后面的数据
        this.setState({
            id
        })
}

//4.详情页接收id并发送请求
componentDidMount() {
   var id=queryString.parse(this.props.location.search) ;   //取到的是对象
        console.log(id)
        var id=id.id;    //取id后面的数据
        this.setState({
            id
        })
    this.$http.get(`https://douban-api.uieee.com/v2/movie/subject/${id}`).then(res=>{
      ...
    }
}