react路径params和query传值

params传值只能传一个，query可传一个多个对象

 

1、home.js组件用componentDidMount() 钩子函数里，请求数据

 componentDidMount(){
        var that = this
        $.ajax({
          type:"get",
          url:"http://jx.xuzhixiang.top/ap/api/productlist.php",
          dataType:"json",
          async:true,
          success:function(data){
             
              that.setState({arr:data.data})
              console.log(that.state.arr)
          }
        })
      }

2、数据map遍历展示页面,路径传值

render(){
        return (
            

                
首页
                
                 

                      {
                       
                         this.state.arr.map(function(item,i){
                            return(
                                
{item.pname}
                            )
                         })
                      }
                    
                 
                 

                 

			{this.props.children}
		
            
        )
    }

---

 3、params和query传值

params传值：

     detail.js组件接收{"/detail/"+item.pid}>传递的 id，

      通过this.props.params.id接收

      data:{id:that.props.params.id},

      通过id值ajax请求对应的数据

query传值：

    {pathname:'/detail',query:{id:item.pid}}}>{item.pname}

     通过this.location.query.id接收

     data:{id:a.location.query.id},

componentWillReceiveProps(a){ //a就是接收的值
        var that = this
        $.ajax({
            type:"get",
            url:"http://jx.xuzhixiang.top/ap/api/detail.php",
            data:{id:that.props.params.id},   //或者a.props.params.id
            dataType:"json",
            async:true,
            success:function(data){
              console.log(data.data.pdesc)
               that.setState({arr:data.data})
            }
        })
    }

 传值成功：效果图

 

---

4、通过路由进入离开组件促发事件的钩子函数

onEnter ={tap.bind(this)}

onLeave={tap.bind(this)}

1、onLeave={tap.bind(this)}>

2、在全局声明一个tap函数，即可促发

const tap=function(){
	console.log('路由离开/进入')
}

---

完整代码：

home.js

import React from "react"
import $ from "jquery"
import {Link} from 'react-router'

class Home extends React.Component{
    constructor(props){
       super(props)
       this.state={
           arr:[]
       }
    }

    render(){
        return (
            

                
首页
                
                 

                      {
                       
                         this.state.arr.map(function(item,i){
                            return(
                                
{item.pname}
                            )
                         })
                      }
                    
                 
                 

                 

					{this.props.children}
				
            
        )
    }
       
    componentDidMount(){
        var that = this
        $.ajax({
          type:"get",
          url:"http://jx.xuzhixiang.top/ap/api/productlist.php",
          dataType:"json",
          async:true,
          success:function(data){
             
              that.setState({arr:data.data})
              console.log(that.state.arr)
          }
        })
      }

}

export default Home

detail.js

import React from "react"
import $ from "jquery"


class Detail extends React.Component{
    constructor(props){
       super(props)
       this.state={
          arr:[]
       }
    }

    render(){
        console.log(this.props.params.id)
        return (
            

                
详情
                
{this.state.arr.pdesc}
            
        )
    }
       
    componentWillReceiveProps(a){ //a就是接收的值
        var that = this
        $.ajax({
            type:"get",
            url:"http://jx.xuzhixiang.top/ap/api/detail.php",
            data:{id:that.props.params.id},
            dataType:"json",
            async:true,
            success:function(data){
              console.log(data.data.pdesc)
               that.setState({arr:data.data})
            }
        })
    }
    

}

export default Detail