React 获取路由参数

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'))