React頁面跳轉傳參

1. this.props.location.query：
   1）路由注冊
   
   2）發起跳轉頁面
   html方式：
    <Link to={{ path : ' /target ' , query : { id : '6666' }} >XXXX 
   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傳的參數是公開的，會在地址欄中顯示;
   
   2）發起跳轉頁面
   html方式：
    <Link to={{ path : ' /target ' , state : { id : '6666' }} >XXXX 
   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）路由注冊
   
   2）發起跳轉頁面
   html方式：
    <Link to={ ' /target/ ' + ' 6666 ' } >XXXX 
   js方式：
   this.props.history.push(  '/target/'+'6666'  )
   3）接受跳轉頁面
   const id=this.props.location.macth;
   就可以接受到傳遞過來的參數（id）

4. this.props.location.search：
   1）路由注冊
   
   
   ……
   

2）發起跳轉頁面
html方式：
 <Link to={path : ' /target?id=6666 ' } >XXXX 
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;
}

2020-10-08