React中获取路由参数方法
第一种
const url = new URLSearchParams(location.search) // 获取url地址参数
const params = url.get('参数名') // 得到的就是值
第二种
const urlSearchParams = new URLSearchParams(window.location.search);
const params = Object.fromEntries(urlSearchParams.entries());
console.log(params) // {id: '2', isShare: 'true'}
console.log(params.id) // 2
第三种
// 路由的配置上添加动态参数 如：/page/template/home/:id
// 引入 useParams
import { useNavigate, useParams } from "react-router-dom";
// 获取参数
const { id } = useParams() // 即可
第四种
function getQuery(variable){
let query = window.location.search.substring(1);
let vars = query.split("&");
for (let i=0;i<vars.length;i++) {
let pair = vars[i].split("=");
if(pair[0] == variable){return pair[1];}
}
return(false);
}
console.log(getQuery('id'))
