useLocation

useLocation钩子返回当前的location对象。
useLocation相关的属性：

1. pathname:当前URL的路径部分（如/about）
2. search:URL的查询字符串（如?name=John）
3. hash:URL的哈希片段（如#section1）
4. state:用于存储与该位置关联的状态对象（通过导航时可以传递，如下）。

const link = '/customer/followUpRecord';
history.push({pathname: link,state: {refundId: refund_id,userId: user_id,userName: user_name,},
});

//followUpRecord.tsx
const location = useLocation();
//...
if (!(location.state as any).refundId) return;
//...

useHistory

useHistory钩子返回历史对象，它提供了一些方法用于导航和控制浏览历史。
useHistory主要用于编程式导航。
useHistory相关的属性：

1. push(path,state):推送一个新的入口到历史堆栈，导航到一个新的URL。
2. replace(path,state):替换历史堆栈中的当前条目，导航到一个新的URL，但不会创建的历史记录。
3. go(n):在历史堆栈中前进或后退n步。
4. goBack():相当于go(-1),后退一步。
5. goForward():相当于go(1),前进一步。

useParams

类似于vue中的动态路由，获取动态路由后面拼接的参数，注意区分useLocation中的search参数

{path: '/pagegroup/:id',exact: true,component: _loadable(async() => (await import('./pagegroup')).PageGroup),
},

//pagegroup.tsx
const { id } = useParams() as any;

useRouteMatch(对react-route-dom版本有要求,v5.1.0 及之后)

当前是否匹配某路由，可选参数strict, end, sensitive等

import React from 'react';
import { useRouteMatch } from 'react-router-dom';function MyComponent() {const match = useRouteMatch({path:'/clientHeight',strict:true, //严格比配});return (<div>{match.ieExact ? "当前URL匹配 /clientHeight" : "当前URL不匹配 /clientHeight"}</div>);
}
export default MyComponent;