如何在 React 中从 URL 获取查询参数

Question

我试图通过在版本 6 中以这种方式遵循反应路由器 dom 文档来从 URL 获取查询参数

import * as React from "react";
import { useSearchParams } from "react-router-dom";

function App() {
  let [searchParams, setSearchParams] = useSearchParams();

  function handleSubmit(event) {
    event.preventDefault();
    let params = serializeFormQuery(event.target);
    setSearchParams(params);
  }

  return (
    <div>
      <form onSubmit={handleSubmit}>{/* ... */}</form>
    </div>
  );
}

但它让我空了 object

我尝试了其他方法

import React from "react";
import ReactDOM from "react-dom";
import { Link, useLocation, BrowserRouter as Router } from "react-router-dom";
function User({ name }) {
  return <div>{name}</div>;
}
function useQuery() {
  return new URLSearchParams(useLocation().search);
}

function useQuerym2() {
  const { search } = useLocation();

  return React.useMemo(() => new URLSearchParams(search), [search]);
}

function QueryScreen() {
  let query = useQuery();
 let querym2 = useQuerym2();

return <></>
}

但得到了相同的结果

最后我开发了一种从 URL 获取 queryParams 的方法

const convertQueryParamsStringToQueryParamsObject = (string) => {
    let queryParams = {};
    // remove first letter from query string
    string = string.substring(1);
    // console.log("string", string);
    // convert string to array
    const queryParamsArray = string.split("&");
    // console.log("queryParamsArray", queryParamsArray);

    // covert each index query to object
    queryParamsArray.forEach((queryParam) => {
        // console.log("queryParam", queryParam);
        // split param by =
        const queryParamArray = queryParam.split("=");
        // console.log("queryParamArray", queryParamArray);
        queryParams[queryParamArray[0]] = queryParamArray[1];
        // console.log("queryParams", queryParams);
    });
    return queryParams;
};

你必须在你的反应 function 组件中调用它

const FunchionalComponent =()=> {

    const { search } = useLocation();
    let queryParams = convertQueryParamsStringToQueryParamsObject(search);
    console.log("queryParams", queryParams);

    return <></>;
};

Answer 1

在你的第二种方法中，这是缺失的

function useQuery() {
  // Use get method to retrieve queryParam
  return new URLSearchParams(useLocation().search).get("queryParamName");
}