React页面跳转传参

来自 https://www.jianshu.com/p/02c1cf54a5df 侵删

1. this.props.location.query：
   1）路由注册
   <Route path=' /target ' component={TargetPage}></Route>
   2）发起跳转页面
   html方式：
   <Link to={{ path : ' /target ' , query : { id : '6666' }} >XXXX</Link>
   js方式：
   this.props.history.push({ pathname : '/target' , query : { id : '6666' }})
   3）接受跳转页面
   const id=this.props.location.query.id;
   就可以接受到传递过来的参数（id）

2. this.props.location.state：同query差不多，但是state传的参数是加密的，query传的参数是公开的，会在地址栏中显示;
   <Route path=' /target ' component={TargetPage}></Route>
   2）发起跳转页面
   html方式：
   <Link to={{ path : ' /target ' , state : { id : '6666' }} >XXXX</Link>
   js方式：
   this.props.history.push({ pathname : '/target' , state : { id : '6666' }})
   3）接受跳转页面
   const id=this.props.location.state.id;
   就可以接受到传递过来的参数（id）

3. this.props.location.match：
   1）路由注册
   <Route path=' /target/:id ' component={TargetPage}></Route>
   2）发起跳转页面
   html方式：
   <Link to={ ' /target/ ' + ' 6666 ' } >XXXX</Link>
   js方式：
   this.props.history.push( '/target/'+'6666' )
   3）接受跳转页面
   const id=this.props.location.macth;
   就可以接受到传递过来的参数（id）

4. this.props.location.search：
   1）路由注册
   <Switch>
   <Route path=' /target ' component={TargetPage}></Route>
   ……
   </Switch>

2）发起跳转页面
html方式：
<Link to={path : ' /target?id=6666 ' } >XXXX</Link>
js方式：
this.props.history.push('/target?id=6666')
3）接受跳转页面
相当于解析地址信息
const id= getQueryVariable(this.props.location.search, 'id');
或者
const id= getQueryVariable(window.location.search，‘id');
就可以接受到传递过来的参数（id）

function getQueryVariable(searchIn, variable) {
    if (!searchIn || !variable) {
        return null;
    }
    const query = searchIn.substring(1);
    const vars = query.split("&");
    for (let i = 0; i < vars.length; i++) {
        const pair = vars[i].split("=");
        if (pair[0] === variable) {
            return pair[1];
        }
    }
    return null;
}

作者：周_0717
链接：https://www.jianshu.com/p/02c1cf54a5df
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。