react如何获取url中文参数
获取URL中文参数的方法
在React中获取URL中文参数时，由于中文会被URL编码（如%E4%B8%AD%E6%96%87），需要解码后才能正常使用。以下是具体实现方法：
使用URLSearchParams解析参数
通过window.location.search获取查询字符串，利用URLSearchParams解析参数，再使用decodeURIComponent解码中文：
const queryString = window.location.search;
const searchParams = new URLSearchParams(queryString);
const paramValue = decodeURIComponent(searchParams.get('paramName'));使用React Router的useSearchParams
如果项目使用React Router v6，可以通过useSearchParams钩子获取并解码参数：
import { useSearchParams } from 'react-router-dom';
function MyComponent() {
const [searchParams] = useSearchParams();
const paramValue = decodeURIComponent(searchParams.get('paramName'));
// 使用解码后的paramValue
}手动解析URL参数
对于没有使用React Router的情况，可以手动拆分URL并解码：
const getUrlParam = (name) => {
const reg = new RegExp(`(^|&)${name}=([^&]*)(&|$)`);
const result = window.location.search.substr(1).match(reg);
return result ? decodeURIComponent(result[2]) : null;
};
const paramValue = getUrlParam('paramName');注意事项
- 确保在组件生命周期合适的阶段获取参数（如
useEffect中）。 - 如果参数可能包含特殊字符，始终使用
decodeURIComponent解码。 - 考虑使用第三方库如
query-string处理复杂URL场景。
以上方法均能正确处理中文参数，根据项目技术栈选择适合的实现方式。
