CODEWITHSUNDEEP
reactjsreact-router
Kay
Kay

Reputation: 881

React router how to get current path and look for its updates

Hello I have question how can I get current path of app with search params and look for its updates. For example I have localhost3000/?filter=breakfastdinner and I want to go back to localhost3000/?filter=breakfast. I want to wait for URL updates to use useEffect.

useEffect(() => {
    for (let i = 0; i <= recipeTypesArray.length - 1; i++) {
      if (searchParams.get("filter")?.includes(recipeTypesArray[i])) {
        dispatch(
          recipeAction.addFilters({
            content: recipeTypesArray[i],
            filterName: "filterTypes",
          })
        );
      }
      if (!searchParams.get("filter")?.includes(recipeTypesArray[i])) {
        dispatch(
          recipeAction.removeFilters({
            content: recipeTypesArray[i],
            filterName: "filterTypes",
          })
        );
      }
    }
    initial = false;
    console.log(chosenFiltersTypes);
  }, []);

Upvotes: 0

Views: 3079

Answers (2)

mahan
mahan

Reputation: 14985

Use useLocation() hook.

 const { hash, pathname, search } = useLocation();

Upvotes: 2

Afsanefda
Afsanefda

Reputation: 3339

What about using useRouter(); and pass the route in the useEffect deps, something like:

const { asPath } = useRouter(); // asPath or whatever from the router

useEffect(() => {
    for (let i = 0; i <= recipeTypesArray.length - 1; i++) {
      if (searchParams.get("filter")?.includes(recipeTypesArray[i])) {
        dispatch(
          recipeAction.addFilters({
            content: recipeTypesArray[i],
            filterName: "filterTypes",
          })
        );
      }
      if (!searchParams.get("filter")?.includes(recipeTypesArray[i])) {
        dispatch(
          recipeAction.removeFilters({
            content: recipeTypesArray[i],
            filterName: "filterTypes",
          })
        );
      }
    }
    initial = false;
    console.log(chosenFiltersTypes);
  }, [asPath]);

Edit:

For react-router how about these hooks (based on your goal)?

useHistory
useLocation
useParams
useRouteMatch

I think all of them are supported in v6 too.

https://v5.reactrouter.com/web/api/Hooks

Upvotes: 1

Related Questions