來自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;
}