要在AWS Amplify Hosting中保留查询字符串,你可以使用React的useLocation钩子来获取当前页面的URL和查询字符串。然后,你可以使用useEffect钩子来处理查询字符串的变化。
下面是一个示例代码:
import React, { useEffect } from 'react';
import { useLocation } from 'react-router-dom';
function App() {
const location = useLocation();
useEffect(() => {
// 处理查询字符串的变化
const queryString = new URLSearchParams(location.search);
const param1 = queryString.get('param1');
const param2 = queryString.get('param2');
// 执行你的逻辑代码
// ...
// 为了演示目的,将查询字符串打印到控制台
console.log('param1:', param1);
console.log('param2:', param2);
}, [location]);
return (
{/* 页面内容 */}
);
}
export default App;
在上面的代码中,我们首先导入了useLocation钩子。然后,在组件中使用useLocation钩子来获取当前页面的URL和查询字符串。
然后,我们使用useEffect钩子来处理查询字符串的变化。我们创建了一个URLSearchParams对象来解析查询字符串,并使用get方法获取特定参数的值。在这个例子中,我们获取了名为param1和param2的参数的值。
然后,你可以执行你的逻辑代码,根据查询字符串中的参数进行不同的操作。
为了演示目的,我们在这个例子中只是将查询字符串打印到控制台。你可以根据你的需求修改代码来处理查询字符串的值。
最后,我们返回组件的内容。你可以在这里添加你的页面内容。
上一篇:保留安卓进度条或恢复它
下一篇:保留白色的非对称混合/颜色插值