3.动态路由传id

1.配置动态路由

//app.js
<Route exact path="/musicdetail/:id" component={MusicDetail}></Route>

2.跳转—this.props.history.push

import React, { Component } from 'react';
class Music extends Component {
    constructor(props){
        super(props);
        this.state={
            playlists:[],
            id:""
        }
    }
    render() {
      return (
         <div className="container">
            {this.state.playlists.map(item=>{
              return(<div className="list" key={item.id} 
              onClick={this.handleClick.bind(this,item.id)}>   //通过事件传参方式传id
               <img className="pic" src={item.coverImgUrl}></img>
               <p className="title">{item.name}</p>
               </div>)
             })}
          </div>
        );
    }
    componentDidMount() {
        var url='https://music.aityp.com/top/playlist?cat=韩语';
        this.$http.get(url).then(res=>{
            var playlists=res.data.playlists;
            this.setState({
                playlists
            })
        })
    }
    handleClick=(id)=>{
        this.props.history.push(`/musicdetail/${id}`)
    }  
}
export default Music;

3.详情页面接收id —this.props.match.params

 componentDidMount() {
        var id=this.props.match.params.id;
        this.$http.get(`https://music.aityp.com/playlist/detail?id=${id}`).then(res=>{
          ...
        }
 }