react及hook路由传参

前言

总结 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 : 'sunny' }}}> 
this.props.history.push({pathname:"/sort ",state : { name : 'sunny' }});
读取参数用: 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

function Home(props) {
    const location = useLocation();
    return (
        <div className='home'>
            <Banner />
        </div>
    )
}

Hook 通过params 进行参数传参

import { useHistory, useParams, useLocation } from 'react-router-dom';

hook 通过params 进行参数传参 ，注意由于定义了orderId，所以orderId必传，否则报错

// 定义路由匹配
<Route path: '/home/specialCar/specialDetail/:orderId' />

// 跳转
history.push({ pathname: `/home/specialCar/specialDetail/${orderId}` });

通过params方式传输的数据：
{
  hash: ""
  key: "4yun6a"
  pathname: "/home/specialCar/specialDetail/130"
  search: ""
}

对应页面接受参数
这里可以对pathname获取需要的数据，但是useParams更方便
const routeParams = useParams();
// routeparams 返回的是： {orderId: "130"}
const ruleId = routeParams.orderId; // 获取ruleId

地址栏表现为：/home/priceManagement/createCoupon/130
这种方式参数数据会显示在地址栏中，刷新也不会消失,如果失去登陆态导致重新登陆，地址栏和数据依旧保持

如果需要传输对象 需要将对象转为字符串，接收再转为对象，但是地址栏不好看，不推荐

query跟state类似，不举例了

Hook 通过state 进行参数传参

// 定义路由匹配
<Route path: '/home/priceManagement/createCoupon' />

// 跳转
history.push({pathname:"/home/priceManagement/createCoupon",state : { ruleId : 87 }});

通过state方式传输的数据：
{
  hash: ""
  key: "n400oa"
  pathname: "/home/priceManagement/createCoupon"
  search: ""
  state: {ruleId: 87}
}

对应页面接受参数
const ruleId = location.state ? location.state.ruleId : ''; // 获取ruleId

地址栏表现为：/home/priceManagement/createCoupon
这种方式参数数据不会显示在地址栏中，刷新也不会消失，如果失去登陆态导致重新登陆，state直接成为undefined

Hook 通过search方式

<Route path: '/home/priceManagement/createCoupon' />


跳转携带参数
history.push(`/home/priceManagement/createCoupon?ruleId=${ruleId}`);

通过search方式传输的数据：
{
  hash: ""
  key: "biecw5"
  pathname: "/home/priceManagement/createCoupon"
  search: "?ruleId=87"
  state: undefined
}

对应页面接受参数
const ruleId = location.search ? location.search.split('=')[1] : ''; // 获取ruleId

地址栏表现为：/home/priceManagement/createCoupon?ruleId=87
这种方式参数数据不会显示在地址栏中，刷新也不会消失，如果失去登陆态导致重新登陆，地址栏和search并不会丢失