help-threads-react

Deepak – 06-23 Oct 2

DDeepak

10/2/2022

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

RRhys

10/2/2022

@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

DDeepak

10/2/2022

yes, its helpful Thanks

RRhys

10/2/2022

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

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

DDeepak

10/2/2022

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

RRhys

10/2/2022

how are you calling that function?

DDeepak

10/2/2022

<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

RRhys

10/2/2022

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

Solution

DDeepak

10/2/2022

thanks , got it

UUUnknown User

10/2/2022

Message Not Public

DDeepak

10/2/2022

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

RRhys

10/2/2022

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

DDeepak

10/2/2022

just like this

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

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

RRhys

10/2/2022

yeah im pretty sure that'll work

DDeepak

10/2/2022

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 😀

RRhys

10/2/2022

talking it through is the best debugging technique there is

UUUnknown User

10/2/2022

Message Not Public

Looking for more? Join the community!

help-threads-react

help-threads-react

Want results from more Discord servers?

Add your server