如何通过 React Router 传递和使用查询参数？答案

【问题标题】：How to pass and use query parameters through react router?如何通过 React Router 传递和使用查询参数？
【发布时间】：2022-01-03 04:14:49
【问题描述】：

我正在尝试通过 url 获取查询参数的值并将其用于 api 调用例如：

import { Link, useSearchParams } from "react-router-dom";

const CommonTypes = () => {
  let [searchParams, setSearchParams] = useSearchParams();

  const handleClick = (car) => {
    setSearchParams({ type: car });
  };

  return (
    <>
      <div className=" w-screen">
        <div className="container mx-auto max-w-5xl px-10 grid grid-cols-2 gap-10 py-10">
          <div className=" min-w-7xl h-fit border rounded-lg border-stone-900 p-5 pb-16 text-left ">
            <h1 className="font-semibold text-xl mb-2 font-sans">
              <span className="text-red-500 font-semibold text-xl font-sans">
                Common
              </span>{" "}
              types of choice
            </h1>
            <p className="font-sans font-medium">
              You can quickly pick a category from here by clicking on one of
              the following icons
            </p>
            <p>
              -----------------------------------------------------------------
            </p>
            <div className="grid grid-cols-3 gap-14 text-center ">
              <Link to={"/sub-cars"} onClick={handleClick(hatchback)}>
                <div className="">
                  <img src={hatchback} alt="" className="w-44 h-28"></img>
                  <p>----------------</p>
                  <span className="font-sans font-semibold text-red-500">
                    HATCHBACK
                  </span>
                </div>
              </Link>

如您所见，我正在传递值类型，但 url 没有通过查询参数，例如：http://localhost:3000/sub-cars?type=hatchback 所以我可以在api调用的新页面，我的其他组件看起来像这样

const Models = () => {
  let [searchParams, setSearchParams] = useSearchParams();

  useEffect(() => {
    console.log("lol");
    console.log(searchParams.get("type"));
  }, []);

  return (
    <>
      <Navbar />
      <span>{searchParams.get("type")}</span>
    </>
  );
};

【问题讨论】：

标签： javascript reactjs react-router

【解决方案1】：

我认为您使用的是 react router dom v6，它有一些新的更新，为了将用户导航到其他页面并传递搜索查询，您可以执行以下操作，替换为链接并从 react-router 导入 createSearchParams -dom

   <Link
        to={{
          pathname: "sub-cars",
          search: `?${createSearchParams({
            type: "cars"
          })}`
        }}
      >

import { useNavigate, createSearchParams, Link } from "react-router-dom";

export default function Home() {
  const navigate = useNavigate();
  return (
    <div>
      <Link
        to={{
          pathname: "sub-cars",
          search: `?${createSearchParams({
            type: "cars"
          })}`
        }}
      >
        <button>First Method - Take me to Sub Cars</button>
      </Link>

      <br />
      <br />

      <button
        onClick={() => {
          navigate({
            pathname: "sub-cars",
            search: `?${createSearchParams({
              type: "cars"
            })}`
          });
        }}
      >
        Second Method - Take me to Sub Cars
      </button>
    </div>
  );
}

您也可以检查代码和框

【讨论】：

如果你觉得这个答案有用，你能接受吗@Mohamed Nabil

【解决方案2】：

我认为这是因为 useEffect 中的 useSearchParams。尝试在效果之外使用它并依赖于效果类型。

例如..

const Models = () => {
        let [searchParams, setSearchParams] = useSearchParams();
  
    let type = searchParams.get("type")

    useEffect(() => {
      console.log("lol! the type is " , type );
     }, [type ]);

   return (
     <>
       <Navbar />
       <span>{type}</span>
     </>
   );
 };

【讨论】：

【解决方案3】：

您可以通过位置状态发送您想要的数据，并通过位置挂钩在新页面（您正在重定向的位置）中捕获它，如下所示：

<Link to={{pathname: "/sub-cars", state: {carDetails: yourValue}}} onClick={handleClick(hatchback)}>
                    <div className="">
                      <img src={hatchback} alt="" className="w-44 h-28"></img>
                      <p>----------------</p>
                      <span className="font-sans font-semibold text-red-500">
                        HATCHBACK
                      </span>
                    </div>
                  </Link>

现在在另一边

    import {useLocation} from 'react-router-dom';

     your function {
     const location = useLocation();
      
     const [car, setCar] = useState(location.state.carDetails)

}

【讨论】：