Reactjs 当URL参数更改时，如何重新加载页面？（反应钩）

我有一个页面，您可以在其中搜索项目（如市场）

url是：

http://localhost:3000/s/:searchQuery

个人资料也是如此：

url是：

http://localhost:3000/p/:userID

如果在搜索页面上再次搜索，或在另一个配置文件上单击某个配置文件，则该页面将不会重新加载

我如何才能让它在更改时重新播放？

这是我的搜索页面：

//#####################################################################
import React, { useState, useEffect } from "react";
import { useParams } from "react-router";
import { useHistory, useLocation } from "react-router-dom";
//#####################################################################
import "./Search.scss";
import Product from "../../../Product";
import "../../ui/inputs/inputs.scss";
import classNames from "classnames/bind";
import algoliasearch from "algoliasearch";
import ReactPaginate from "react-paginate";
import categoriesJSON from "../../../json/categories.json";
import conditionJSON from "../../../json/conditions.json";
//#####################################################################
import ArrowForwardIosIcon from "@material-ui/icons/ArrowForwardIos";
import CheckCircleIcon from "@material-ui/icons/CheckCircle";
import RadioButtonUncheckedIcon from "@material-ui/icons/RadioButtonUnchecked";
import SortIcon from "@material-ui/icons/Sort";
import { Skeleton } from "@material-ui/lab";
//#####################################################################
import { useAuth } from "../../../contexts/AuthContext";
import { useUser } from "../../../contexts/UserContext";
//#####################################################################
function Search() {
  //-------------------------------------------------------
  //STATES
  //-------------------------------------------------------
  const { userData, closeNotifications, openNotifications } = useUser();
  const [pageCount, setPageCount] = useState(1);
  const [currentPage, setCurrentPage] = useState(0);
  const [isLoaded, setisLoaded] = useState(false);
  const [filterBuyNow, setFilterBuyNow] = useState(false);
  const [filterBestOffer, setFilterBestOffer] = useState(false);
  const [filterTrade, setFilterTrade] = useState(false);
  const [sortBy, setSortBy] = useState("listings");
  const [sortByChanged, setSortByChanged] = useState(false);

  const [searchQuery, setSearchQuery] = useState(useLocation().searchQuery);

  const [listingSearchResults, setListingSearchResults] = useState([]);
  const [filters, setFilters] = useState([]);
  const [buyingFormatString, setBuyingFormatString] = useState("");
  const [filtersChanged, setFiltersChanged] = useState(false);
  const [searched, setSearched] = useState(false);
  const [recieved, setRecieved] = useState(false);
  const history = useHistory();
  const searchClient = algoliasearch(
    process.env.REACT_APP_ALGOLIA_APP,
    process.env.REACT_APP_ALGOLIA_SEARCH_KEY
  );
  const listingIndex = searchClient.initIndex(sortBy);
  listingIndex
    .setSettings({
      attributesForFaceting: [
        "condition",
        "category",
        "buyNow",
        "bestOffer",
        "trade",
        "status",
      ],
    })
    .catch((err) => console.log(err));
  const [categories, setCategory] = useState(categoriesJSON);
  const [conditions, setConditions] = useState(conditionJSON);
  const [selectedConditions, setSelectedConditions] = useState([]);
  const [currentCondition, setCurrentCondition] = useState("");
  const [conditionsChanged, setConditionsChanged] = useState(false);
  //~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
  const [mobileOpenFilters, setMobileOpenFilters] = useState(false);
  //~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
  const location = useLocation();
  //-------------------------------------------------------
  //USE EFFECTS
  //-------------------------------------------------------
  //-----------------------------------------I THOUGHT THIS WOULD WORK?
  useEffect(() => {
    searchListings();
  }, [searchQuery]);
  //~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
  useEffect(() => {
    if (sortByChanged) {
      searchListings();
      setSortByChanged(false);
    }
  }, [sortByChanged]);
  //~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
  useEffect(() => {
    setFilters([]);
    if (filterBuyNow) {
      setFilters((prev) => [...prev, "buyNow:true"]);
    }
    if (filterBestOffer) {
      setFilters((prev) => [...prev, "bestOffer:true"]);
    }
    if (filterTrade) {
      setFilters((prev) => [...prev, "trade:true"]);
    }
    return () => {
      setFiltersChanged(true);
    };
  }, [filterBuyNow, filterBestOffer, filterTrade]);
  //~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
  useEffect(() => {
    return () => {
      if (filtersChanged) {
        searchListings();
      }
      if (conditionsChanged) {
        searchListings();
      }
      setFiltersChanged(false);
    };
  }, [filtersChanged, conditionsChanged]);
  //~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
  useEffect(() => {
    if (conditionsChanged) {
      checkedCondition(currentCondition);
      setConditionsChanged(false);
    }
  }, [conditionsChanged]);
  //~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
  //-------------------------------------------------------
  //CLASSNAMES
  //-------------------------------------------------------
  const filterBuyNowSelected = classNames({
    filtersTop__filter: true,
    checkedFilter: filterBuyNow,
  });
  const filterBestOfferSelected = classNames({
    filtersTop__filter: true,
    checkedFilter: filterBestOffer,
  });
  const filterTradeSelected = classNames({
    filtersTop__filter: true,
    checkedFilter: filterTrade,
  });
  const filtersDrawer = classNames({
    filtersSide: true,
    showFiltersSide: mobileOpenFilters,
  });
  const openFiltersButton = classNames({
    openFilters: true,
    moveFiltersButton: mobileOpenFilters,
  });
  //-------------------------------------------------------
  //METHODS
  //-------------------------------------------------------
  function checkedSellingDetails(value) {
    if (value === "buyNow") {
      setFilterBuyNow(!filterBuyNow);
    }
    if (value === "bestOffer") {
      setFilterBestOffer(!filterBestOffer);
    }
    if (value === "trade") {
      setFilterTrade(!filterTrade);
    }
  }
  //~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
  function checkedCategory() {}
  //~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
  function checkedCondition(condition) {
    var tempArray = selectedConditions;
    if (tempArray.includes(condition)) {
      var index = tempArray.indexOf(condition);
      tempArray.splice(index, 1);
      setSelectedConditions(tempArray);
    } else if (!tempArray.includes(condition)) {
      tempArray.push(condition);
      setSelectedConditions(tempArray);
    }
  }
  //~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
  function getMasterString() {
    var masterString = "";
    if (filters) {
      filters.forEach((buyingFormat) => {
        if (masterString === "") {
          masterString = buyingFormat;
        } else {
          masterString += " OR " + buyingFormat;
        }
      });
    }
    if (selectedConditions) {
      selectedConditions.forEach((condition) => {
        if (masterString === "") {
          masterString = condition;
        } else {
          masterString += " OR " + condition;
        }
      });
    }
    if (masterString === "") {
      masterString = "status:listed";
    } else {
      masterString += " AND " + "status:listed";
    }
    console.log(masterString);
    return masterString;
  }
  //~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
  const handlePageChange = (selectedObject) => {
    setCurrentPage(selectedObject.selected);
    console.log(currentPage);
  };

  function searchListings() {
    if (searchQuery !== "") {
      setListingSearchResults([]);
      setRecieved(false);
      var masterString = getMasterString();
      console.log("master string =", masterString);
      listingIndex
        .search(searchQuery, {
          filters: masterString,
          page: currentPage,
        })
        .then((response) => {
          console.log("filters searched was:", masterString);
          const hits = response.hits;
          setPageCount(response.nbPages);
          setisLoaded(true);
          console.log(response.nbPages);
          hits.forEach((hit) => {
            setListingSearchResults((existing) => [...existing, hit]);
          });
        })
        .then(() => {
          setRecieved(true);
        })
        .catch((error) => console.log("error searching listings ", error));
    }
  }
  //-------------------------------------------------------
  //END
  //-------------------------------------------------------
  return (
    <div
      className="searchPage"
      onClick={() => {
        closeNotifications(false);
      }}
    >
.......

//#####################################################################
从“React”导入React，{useState，useffect}；
从“react router”导入{useParams}；
从“react router dom”导入{useHistory，useLocation}；
//#####################################################################
导入“/Search.scss”；
从“../../../Product”导入产品；
导入“../../ui/inputs/inputs.scss”；
从“classNames/bind”导入类名；
从“algoliasearch”导入algoliasearch；
从“react paginate”导入react paginate；
从“../../../json/categories.json”导入categoriesJSON；
从“../../../json/conditions.json”导入条件json；
//#####################################################################
从“@material ui/icons/ArrowForwardIos”导入ArrowForwardIosIcon；
从“@material ui/icons/CheckCircle”导入CheckCircleIcon；
从“@material ui/icons/RadioButtonUnchecked”导入RadioButtonUnchecked；
从“@material ui/icons/Sort”导入巫术；
从“@material ui/lab”导入{Skeleton}”；
//#####################################################################
从“../../../Context/AuthContext”导入{useAuth}”；
从“../../../Context/UserContext”导入{useUser}”；
//#####################################################################
函数搜索（）{
//-------------------------------------------------------
//州
//-------------------------------------------------------
const{userData，closeNotifications，openNotifications}=useUser（）；
const[pageCount，setPageCount]=useState（1）；
const[currentPage，setCurrentPage]=useState（0）；
const[isLoaded，setisLoaded]=useState（false）；
常量[filterBuyNow，setFilterBuyNow]=useState（false）；
const[filterBestOffer，setFilterBestOffer]=使用状态（false）；
常量[filterTrade，setFilterTrade]=useState（false）；
const[sortBy，setSortBy]=使用状态（“列表”）；
const[sortByChanged，setSortByChanged]=useState（false）；
const[searchQuery，setSearchQuery]=useState（useLocation（）.searchQuery）；
常量[listingSearchResults，setListingSearchResults]=useState（[]）；
const[filters，setFilters]=useState（[]）；
const[buyingFormatString，setBuyingFormatString]=useState（“”）；
常量[filtersChanged，setFiltersChanged]=useState（false）；
const[searched，setSearched]=使用状态（false）；
const[received，setreceived]=使用状态（false）；
const history=useHistory（）；
const searchClient=algoliasearch(
process.env.REACT_APP_ALGOLIA_APP，
process.env.REACT\u APP\u ALGOLIA\u SEARCH\u键
);
const listingIndex=searchClient.initIndex（sortBy）；
列表索引
.设置设置({
刻面属性：[
“条件”，
“类别”，
“立即购买”，
“最佳报价”，
“贸易”，
“地位”，
],
})
.catch（（err）=>console.log（err））；
const[categories，setCategory]=useState（categoriesJSON）；
const[conditions，setConditions]=useState（conditionJSON）；
常量[selectedConditions，setSelectedConditions]=useState（[]）；
const[currentCondition，setCurrentCondition]=useState（“”）；
const[conditionsChanged，setConditionsChanged]=useState（false）；
//~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
const[mobileOpenFilters，setMobileOpenFilters]=useState（false）；
//~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
const location=useLocation（）；
//-------------------------------------------------------
//使用效果
//-------------------------------------------------------
//-----------------------------------------我以为这样行吗？
useffect（（）=>{
搜索列表（）；
}，[searchQuery]）；
//~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
useffect（（）=>{
如果（sortByChanged）{
搜索列表（）；
setSortByChanged（假）；
}
}，[sortByChanged]）；
//~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
useffect（（）=>{
setFilters（[]）；
如果（filterBuyNow）{
setFilters（（prev）=>[…prev，“buyNow:true”]；
}
if（过滤器过滤器过滤器）{
setFilters（（prev）=>[…prev，“bestOffer:true”]；
}
if（过滤贸易）{
setFilters（（prev）=>[…prev，“trade:true”]）；
}
return（）=>{
setFiltersChanged（真）；
};
}，[filterBuyNow，FilterBostoffer，filterTrade]）；
//~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
useffect（（）=>{
return（）=>{
如果（过滤器已更改）{
搜索列表（）；
}
如果（条件更改）{
搜索列表（）；
}
setFiltersChanged（假）；
};
}，[filtersChanged，conditionsChanged]）；
//~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
useffect（（）=>{
如果（条件更改）{
检查条件（当前条件）；
setConditionsChanged（假）；
}
}，[conditionsChanged]）；
//~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
//-------------------------------------------------------
//类名
//-------------------------------------------------------
const filterBuyNowSelected=类名称({
过滤器停止过滤器：为真，
checkedFilter:filterBuyNow，
});
const filterBestOfferSelected=类名({
过滤器停止过滤器：为真，
checkedFilter:filterBestOffer，
});
const filterTradeSelected=类名称({
过滤器停止过滤器：为真，
checkedFilter:filterTrade，
});
常量filtersDrawer=类名称({
/#####################################################################
import React, { useEffect, useState, lazy, Suspense } from "react";
import {
  BrowserRouter as Router,
  Switch,
  Route,
  Redirect,
} from "react-router-dom";
//#####################################################################
import "./App.scss";
//#####################################################################
import Admin from "./components/adminPage/AdminPage";
import EditListing from "./components/listing/EditListing/EditListing";
import EditProfile from "./components/EditProfile/EditProfile";
import Error from "./components/errorPage/errorPage";
import Footer from "./Footer";
import Header from "./Header";
import Help from "./components/Help/Help";
import Home from "./Home";
import ListItem from "./components/listing/Listing/ListItem";
import ListingPage from "./components/listing/listingPage/ListingPage";
import Login from "./components/login/Login";
import Messages from "./components/Messages/Messages";
import Payment from "./components/Payment/Payment";
import Profile from "./components/Profile/Profile";
import SendTradeOffer from "./components/Trade/SendTradeOffer/SendTradeOffer";
import Search from "./components/search/Search/Search";
import Signup from "./components/signup/Signup";
import TradeInstance from "./components/Trade/TradeInstance/TradeInstance";
import WelcomePage from "./components/WelcomePage/WelcomePage";
//#####################################################################
import { auth, db } from "./firebase";
//#####################################################################
import { useUser } from "./contexts/UserContext";
import { useAuth } from "./contexts/AuthContext";
//
import { loadStripe } from "@stripe/stripe-js";
import { Elements } from "@stripe/react-stripe-js";

function App() {
  const { userData, setOpenNotifications, openNotifications } = useUser();
  const { searchQuery } = useAuth();
  return (
    <Router>
      <div className="App">
        <Switch>
          {/*
          <Route path="/signup">
            <Signup />
          </Route> */}
          <Route path="/login">
            <Login />
          </Route>
          <Route path="/edit">
            <Header />
            <EditProfile />
          </Route>
          {/*
          <Route path="/checkout">
            <Header />
            <Checkout />
          </Route> */}
          <Route path="/l/:listingID">
            <Header />
            <ListingPage />
          </Route>
          <Route path="/e/:listingID">
            <Header />
            <EditListing />
          </Route>
          <Route path="/p/:userProfile">
            <Header />
            <Profile />
          </Route>
          <Route path="/sendTradeOffer/:tradePartnerID">
            <Header />
            <SendTradeOffer />
          </Route>
          <Route path="/list">
            <Header />
            <ListItem />
          </Route>
          <Route path="/help">
            <Header />
            <Help />
          </Route>
          <Route path="/s/:searchQuery">
            <Header />
            <Search key={searchQuery} />
          </Route>
          <Route path="/messages">
            <Header />
            <Messages />
          </Route>
          <Route path="/trade/:tradeID">
            <Header />
            <TradeInstance />
          </Route>
          <Route path="/admin">
            <Header />
            <Admin />
          </Route>
          {/*<Route path="/payment/:listingID">
            <Elements stripe={promise}>
              <Payment />
            </Elements>
          </Route>
          <Route path="/checkoutSuccess">
            <CheckoutSuccess />
          </Route>*/}
          <Route exact path="/">
            <>
              {userData !== undefined && userData.newUser === true ? (
                <WelcomePage />
              ) : (
                <>
                  <Header />
                  <Home />
                </>
              )}
            </>
          </Route>
          <Route>
            <Header />
            <Error />
          </Route>
        </Switch>
      </div>
    </Router>
  );
}

export default App;