react更改路由入参_react路由传参方式

三种方法 1：query 2.params 3.state

第一种方法：

1.路由表中

2.Link处

HTML方式

XXXX

JS方式

this.props.history.push(  '/sort/'+'2'  )

3.sort页面

通过  this.props.metch.params.id

就可以接受到传递过来的参数(id)

componentWillReceiveProps(nextProps){

console.log(nextProps.match.params,222)

console.log(this.props)

}

第二种方法

通过query

前提：必须由其他页面跳过来，参数才会被传递过来

注：不需要配置路由表。路由表中的内容照常：

1.Link处

HTML方式

JS方式

this.props.history.push({ path : '/sort' ,query : { name: ' sunny'} })

2.sort页面

this.props.location.query.name

或者也可以这样写

Link处

home2222

对应页面的获取方式

componentDidMount () {

console.log(this.props)

// const query=qs.parse(

//     this.props.location.search,

//     { ignoreQueryPrefix:true}

//     )

//      console.log(query);

}

第三种

通过state

同query差不多，只是属性不一样，而且state传的参数是加密的，query传的参数是公开的，在地址栏

1.Link 处

HTML方式：

JS方式：

this.props.history.push({ pathname:'/sort',state:{name : 'sunny' } })

2.sort页面

this.props.location.state.name