路由跳转及传参

方式1：通过params

• 方法一（在刷新页面的时候，参数不会丢失。）

(1)路由文件

<Route path='./home/:id' component={home}></Route>

(2)跳转传参

HTML方式:  <NavLink to={'./home/' +'2'}>用户中心</NavLink>
JS方式:    this.props.history.push('/user/' + '2')

(3)接收参数

this.props.match.params.id

• 方法二（在刷新页面的时候，参数丢失）

(1)跳转传参

this.props.history.push({ pathname: '/home' , params : { id: '2' }})

(2)接收参数

this.props.location.params.id

方式2：通过query

（在刷新页面的时候，参数丢失）

(1)路由文件

<Route path="/home" component={home}/>

(2)跳转传参

HTML方式：<NavLink to={ pathname:'/home', query:{id:3} }>跳转按钮</NavLink>
js方式： this.props.history.push({ pathname: '/three' , query : { id: '6666' }})

(3)接收参数

this.props.location.query.id

方式3：通过state

（在刷新页面的时候，参数不会丢失）

(1)路由文件

<Route path="/home" component={home}/>

(2)跳转传参

HTML方式:  <NavLink to={ pathname: "/home", state: {id: 3} }>日志</NavLink>
JS方式:    this.props.history.push({ pathname: "/home" , state: { id: 3 }})

(3)接收参数

this.props.location.state.id