react动态路由传参,react路由传参数

前言

总结 React-Router 页面路由传参的四种方式，对比四种传参方式的优缺点，更好的去选择合适的方式去传参。

1.params

优点: 刷新地址栏，参数依然在。
缺点: 只能传字符串且传值太多的话，url 会又长又不美观。

// 定义路由匹配<Route path='/path/:name' component={Path}/>// Link组件实现跳转<link to="/path/2">xxx</Link>// history实现跳转this.props.history.push({pathname:"/path/" + name});读取参数用:this.props.match.params.name

params 传参方式可以传递一个或者多个值(值的类型都是字符串)，没法传递一个对象；如果需要传递一个对象的话，可以将 json 对象转换为字符串，传递获取后再将 json 字符串转换为对象将数据取出来。例：

// 定义路由匹配<Route path="/user/:data" component={Component} />;let data = { id: 3, name: "tom", age: 25,};let path = JSON.stringify(data);// 传递路由参数<Link to={path}>用户</Link>;this.props.history.push(path);// 使用路由参数const nowData = JSON.parse(this.props.match.params.data)const { id, name, age } = nowData 2.query // 定义路由匹配<Route path="/user" component={Component} />;let data = { id: 1, name: "tom", age: 25,};<Link to={{ path : ' /query' , query : { name : data }}}>this.props.history.push({pathname:"/query",query: { name : data }});读取参数用: this.props.location.query.name

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

3.state <Route path='/sort ' component={Sort}/><Link to={{ path : ' /sort ' , state : { name : '淡淡的睫毛膏' }}}> this.props.history.push({pathname:"/sort ",state : { name : '淡淡的睫毛膏' }});读取参数用: this.props.location.query.state

优点: 传参优雅，传递参数可以传对象。
缺点: 刷新地址栏，传递参数丢失。

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

优点: 刷新地址栏，参数依然在。
缺点: 只能传递字符串且传值太多的话，url会又长又不美观

react Hooks中获取路由参数的方式：

1.通过hooks钩子函数跳转

import { useHistory,useLocation,useParams,useMatch } from 'react-router-dom';let history = useHistory();history.push('/')

2.通过useLocation 获取参数at