react路由传参的三种方式

方式一、params

优势：刷新页面，参数依然存在

缺陷：只能传字符串，并且值太长影响美观

1、路由表：

<Route path='/detail/:id' component={Detail} />

2、Link标签:

<Link to={'/detail/'+'2'} activeClassName='active' >Detail</Link>

3、js语句：

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

4、detail页面获取路由参数

this.props.match.params.id

方式二、query

优点：传参优雅，可传对象

缺陷：刷新地址栏，参数丢失

1、Link标签：

<Link to={{path:'/detail', query:{ id: '2' }}} >Detail</Link>

2、js语句：

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

3、detail页面获取路由参数

this.props.location.query.id

方式三、state

优缺点与query类似，只是属性不同，state传参是加密的，query传参是公开的，在地址栏中

1、Link标签：

<Link to={{path:'/detail', state:{ id: '2' }}} >Detail</Link>

2、js语句：

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

3、detail页面获取路由参数

this.props.location.state.id

 

 

 

来源：CSDN

作者：guanguan0_0

链接：https://blog.csdn.net/guanguan0_0/article/details/103632540