一：例地址栏url：

加密前：http://82.157.14.186:3333/mfuwu/opinionScoreRules?robotId=147&name=小爱同学

解析加密参数robotId和name:

1、下载 react-router-dom：npm install react-router-dom

2、引入useLocation：import { useLocation } from 'react-router-dom'
3、使用useLocation解析参数
const [robotId,setRobotId]=useState("")
const [robotName,setRobotName]=useState("")
const { search = '' } = useLocation() //解构search,useLocation()包含pathname、search 和 state 等属性
const handelUrl = () => {
var queryString = decrypt(search.replace(/^\?/, '')) //解密之前拿公钥加密的内容,queryString格式示例：queryString="robotId='123' & name='我是npc'"
if (queryString) {
// 将查询字符串按'&'分割成参数数组
var pairs = queryString.split('&')
// 创建一个空对象来存储参数
var queryParams: any = {}
// 遍历参数数组
for (var i = 0; i < pairs.length; i++) {
// 将每个参数按'='分割成键和值
var pair = pairs[i].split('=')
// 将参数名和参数值存入对象中
queryParams[decodeURIComponent(pair[0])] = decodeURIComponent(pair[1] || '')
}
console.log('解析后的参数对象',queryParams)
setRobotId(queryParams.robotId) //queryParams参数示例：queryParams:{'robotId':'123','name':'我是npc'}
setRobotName(queryParams.name)
}
};
4、 解密方法
export function decrypt(data: string) {
const encryptedHexStr = CryptoJS.enc.Hex.parse(data)
const str = CryptoJS.enc.Base64.stringify(encryptedHexStr)
const decrypt = CryptoJS.AES.decrypt(str, SECRET_KEY, {
iv: SECRET_IV,
mode: CryptoJS.mode.CBC,
padding: CryptoJS.pad.Pkcs7,
})
const decryptedStr = decrypt.toString(CryptoJS.enc.Utf8)
return decryptedStr.toString()
}
5、useLocation用法：
   useLocation 是一个 Hook，用于获取当前路由的位置信息（location object）。这个对象包含了当前 URL 的信息，如 pathname、search 和 state 等属性，上个示例中使用了search
   location.pathname 包含当前路由的路径部分。
   location.search 包含 URL 查询字符串（问号后面的部分）。
   location.state 在进行导航时可以通过 history.push 或 组件的 state 属性传递的状态对象。
二：动态路由解析：useParams
{
path: '/goods/:goodsId/order/:orderId', 后面跟orderId即动态路由
element: <Order/>
}
function Order(){
    const params = useParams();
   return
    <div>
      <h2>商品组件</h2>
      <p>
         <span>商品ID：{params.goodsId}</span>
         <span>订单ID：{params.orderId}</span>
      </p>
     </div> }