[react]react归纳

1.params



<Route path='/path/:name' component={Path}/>



<link to="/path/2">xxx</Link> this.props.history.push({pathname:"/path/" + name});
读取参数用:this.props.match.params.name

优势 ： 刷新地址栏，参数依然存在
 缺点:只能传字符串，并且，如果传的值太多的话，url会变得长而丑陋。

2.query



<Route path='/query' component={Query}/>



<Link to=pw_ path : ' /query' , query : { name : 'sunny' }> this.props.history.push({pathname:"/query",query: { name : 'sunny' }}); 读取参数用: this.props.location.query.name

优势：传参优雅，传递参数可传对象；
 缺点：刷新地址栏，参数丢失

3.state



<Route path='/sort ' component={Sort}/>



<Link to=pw_ path : ' /sort ' , state : { name : 'sunny' }> this.props.history.push({pathname:"/sort ",state : { name : 'sunny' }}); 读取参数用: this.props.location.query.state

优缺点同query

4.search



<Route path='/web/departManange ' component={DepartManange}/>



<link to="web/departManange?tenantId=12121212">xxx</Link> this.props.history.push({pathname:"/web/departManange?tenantId" + row.tenantId});
读取参数用: this.props.location.search

链接：https://www.jianshu.com/p/ad8cc02b9e6c


PS：如果不知道怎么接收参数，可以在跳转到的页面打印出来，this.props

条件渲染：
  {变量 ? (
                <div>
                  如果为true，这里就显示，否则为null
                </div>
              ) : null}