react router路由传参的三种方式

1.通配符传参

  • Route定义方式:
  • Link组件:About
  • 参数获取:this.props.location.query

优点:简单快捷,并且,在刷新页面的时候,参数不会丢失。

缺点:只能传字符串,并且,如果传的值太多的话,url会变得长而丑陋。

如果,你想传对象的话,可以用JSON.stringify(),想将其转为字符串,然后另外的页面接收后,用JSON.parse()转回去。这里简单提一下,不赘述。

2.query

  • Route定义方式:
  • Link组件:var query = { pathname: '/Home', query: '我是通过query传值 ' } Home
  • 参数获取:this.props.location.query

优点:优雅,可传对象

缺点:刷新页面,参数丢失

3.state

  • Route定义方式:
  • Link组件:Download
  • 参数获取:this.props.location.state

优点:优雅,可传对象

缺点:刷新页面,参数丢失

你可能感兴趣的:(js,react-router)