浅谈react路由传参的几种方式

这篇文章主要介绍了浅谈react路由传参的几种方式，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧

第一种传参方式，动态路由传参

通过设置link的path属性，进行路由的传参，当点击link标签的时候，会在上方的url地址中显示传递的整个url

				?

									<Link to='/home?name=dx'>首页</Link>

浅谈react路由传参的几种方式

如果想真正获取到传递过来的参数，需要在对应的子组件中
this.props.location.search 获取字符串，再手动解析

因为传参能够被用户看见，传递获取比较麻烦，所以不推荐

第二种传参方式，隐式路由传参

				?

									<Link to={{

									     pathname: 'about',

									     state: {

									      name: 'dx'

									     }

									    }}>关于</Link>

所谓隐式路由传参，就是传参的信息不回暴露在url中，当点击该link标签，想要获取到传递的参数，就在对应的路由组件中，通过this.props.location.state获取即可

推荐使用，比较安全，获取传递参数都比较方便

第三种传参方式组件间传参

何时使用？
当一个路由组件需要接收来自父组件传参的时候

改造route标签通过component属性激活组件的方式
正常情况下的route标签在路由中的使用方式

				?

									//简洁明了，但没办法接收来自父组件的传参

									<Route path='/test' component={Test}></Route>

改造之后

				?

									<Link to='/test'>测试</Link>

									<Route path='/test' render={(routeProps) => {

									 //routeProps就是路由组件传递的参数

									     return (

									     //在原先路由组件参数的情况，扩展绑定父组件对子组件传递的参数

									      <Test {...routeProps} name='dx' age={18} />

									     )

									 }}></Route>

当点击link标签时，通过在对应的test子组件中，this.props获取来自父组件传递的参数和路由组件自带的参数
强烈推荐，传递参数略微有些麻烦，接收参数十分方便，并且仍然可以接收路由组件自带的参数，安全，不会被用户看见

第四种传参方式 withRouter 高阶组件给子组件绑定路由参数

withRouter 何时使用？

想要在某个子组件中获取路由的参数，必须得使用路由中的route标签的子组件才能被绑定上路由的参数。

为了解决不通过route标签绑定的子组件获取路由参数的问题，需要使用withRouter

一般用在返回首页，返回上一级等按钮上

				?

									import React from 'react';

									import BackHome from './backhome';

									export default class Test extends React.Component {

									 render () {

									  console.log(this.props)

									  return (

									   <div>

									    这是测试的内容

									//返回首页的按钮不是通过route标签渲染的，所以该子组件的this.props中没有路由参数

									    <BackHome>返回首页</BackHome> 

									   </div>

									  )

									 }

									}

				?

									import React from 'react';

									//导入withRoute

									import {withRouter} from 'react-router-dom';

									class BackHome extends React.Component {

									 goHome = () => {

									  //必须在使用withRouter的情况下，该组件在this.props中才有路由参数和方法

									  //否则，会报错

									  this.props.history.push({

									   pathname: '/home',

									   state: {

									    name: 'dx' //同样，可以通过state向home路由对应的组件传递参数

									   }

									  })

									 }

									 render () {

									  return (

									   <button onClick={this.goHome}>this.props.children</button>

									  )

									 }

									}

									//导出的时候，用withRouter标签将backHome组件以参数形式传出

									export default withRouter(BackHome)