Deepak•2y ago

Deepak – 06-23 Oct 2

Hey, I have reducer function that does some action onClick. However, i also want to navigate the page to some other url. After initial research i came to know that i can't useNavigate() inside a reducer function. How can i combine these two ?

Solution:

thanks , got it

Jump to solution

16 Replies

Rhys•2y ago

@Deepak is this example from the react router docs helpful?

import { useNavigate } from "react-router-dom";

function useLogoutTimer() {
  const userIsInactive = useFakeInactiveUser();
  const navigate = useNavigate();

  useEffect(() => {
    if (userIsInactive) {
      fake.logout();
      navigate("/session-timed-out");
    }
  }, [userIsInactive]);
}

import { useNavigate } from "react-router-dom";

function useLogoutTimer() {
  const userIsInactive = useFakeInactiveUser();
  const navigate = useNavigate();

  useEffect(() => {
    if (userIsInactive) {
      fake.logout();
      navigate("/session-timed-out");
    }
  }, [userIsInactive]);
}

https://reactrouter.com/en/main/hooks/use-navigate If I'm reading your question right, you're trying to call useNavigate inside of a function which violates the rules of hooks so it'll give you an error Instead you need to call it at the beginning of your component and then use the result of it to navigate

useNavigate v6.4.1

Deepak•2y ago

yes, its helpful Thanks

Rhys•2y ago

👍 you can use a ✅ reaction if you want to mark this thread as solved - happy it helped meowthumbsup

Rhys•2y ago

https://reactjs.org/docs/hooks-rules.html this is a good guide for further reading incase you're curious

Rules of Hooks – React

A JavaScript library for building user interfaces

Deepak•2y ago

Could you tell me one more thing i am trying to achive something like this

const navigate = useNavigate();
const handleCick = (searchInput) => {
    navigate(`/menu/${searchInput}`);
  };

const navigate = useNavigate();
const handleCick = (searchInput) => {
    navigate(`/menu/${searchInput}`);
  };

but it isn't able to read the searchinput when i click it lead me to url/menu/undefined

Rhys•2y ago

how are you calling that function?

Deepak•2y ago

<button  onClick={() => {
            dispatch(searchQryHandler(searchInput));
            handleCick();
          }}
        >
          <FiSearch className="inline  mx-1 text-2xl" />
        </button>

<button  onClick={() => {
            dispatch(searchQryHandler(searchInput));
            handleCick();
          }}
        >
          <FiSearch className="inline  mx-1 text-2xl" />
        </button>

oops, i realised the mistake

Rhys•2y ago

handleCick(); looks like it doesn't have any arguments passed into it haha yeah that'd do it

Solution

Deepak•2y ago

thanks , got it

Deepak•2y ago

one more question. sorry for too many what if i don't use navigate inside useEffect is it necessary ?

Rhys•2y ago

i don't think use effect is needed, you can use it without it

Deepak•2y ago

just like this

const navigate = useNavigate();
const handleCick = (searchInput) => {
    navigate(`/menu/${searchInput}`);
  };

const navigate = useNavigate();
const handleCick = (searchInput) => {
    navigate(`/menu/${searchInput}`);
  };

Rhys•2y ago

yeah im pretty sure that'll work

Deepak•2y ago

yes it does work. But i show somewhere that navigate is desined to work with useEffect although i am new so i not very sure but anyway, thanks for you help. Sometime discussing with other make you see the problem 😀

Rhys•2y ago

talking it through is the best debugging technique there is

reactibot•2y ago

This thread hasn’t had any activity in 12 hours, so it’s now locked. Threads are closed automatically after 12 hours. If you have a followup question, you may want to reply to this thread so other members know they're related. https://discord.com/channels/102860784329052160/902647189120118794/1026016606360444968