react-路由传参

路由传参

• :传参

  • 传递:
     <Route path="/movieDetail/:id" component={MovieDetail}></Route>
     {/* 方式二: 展示列表  Link*/}
     {movieList.map(item=>(
     <div key={item.id} style={{background:'hotpink'}}>
     <Link to={'/movieDetail/'+item.id}>电影名称:{item.name}</Link>
     </div>
     ))}
     获取参数:
     	this.props.match.params.id
    

• ?传参

  • 传递:
    	this.props.history.push('/foodDetail?id='+id)
    获取参数:
    	// 方式一
            // let search = this.props.location.search;//?id=1&name=aaa&age=23
            // let sear = search.slice(1);//id=1&name=aaa&age=23
            // let arr = sear.split('&');//['id=1','name=aaa','age=23']
            // let result = {};
            // arr.forEach(item=>{
            //     let aa = item.split('=');//[id,1] [name,aaa] [age,23]
            //     result[aa[0]] = aa[1];
            // })
            // result = {id:1,name:'aaa',age:23}
            // console.log(result);
    
    
            // 方式二.
            let result = querystring.parse(this.props.location.search.slice(1));
            console.log(result);