1.通配符传参
- Route定义方式:<Route path='/About/:id' component={About} />
- Link组件:<Link to="/path/通过通配符传参">About</Link>
- 参数获取:this.props.location.query
优点:简单快捷,并且,在刷新页面的时候,参数不会丢失。
缺点:只能传字符串,并且,如果传的值太多的话,url会变得长而丑陋。
如果,你想传对象的话,可以用JSON.stringify(),想将其转为字符串,然后另外的页面接收后,用JSON.parse()转回去。这里简单提一下,不赘述。
2.query
- Route定义方式:<Route path='/Home' component={Home} />
- Link组件:var query = { pathname: '/Home', query: '我是通过query传值 ' } <Link to={query}>Home</Link>
- 参数获取:this.props.location.query
优点:优雅,可传对象
缺点:刷新页面,参数丢失
3.state
- Route定义方式:<Route path='/Download' component={Download} />
- Link组件:<Link to={{pathname: '/Download',state:'这是state传值'}}>Download</Link>
- 参数获取:this.props.location.state
优点:优雅,可传对象
缺点:刷新页面,参数丢失