R
Reactiflux

help-threads-react

Deepak – 06-23 Oct 2

DDeepak10/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
RRhys10/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
DDeepak10/2/2022
yes, its helpful Thanks
RRhys10/2/2022
👍 you can use a reaction if you want to mark this thread as solved - happy it helped meowthumbsuphttps://reactjs.org/docs/hooks-rules.html this is a good guide for further reading incase you're curious
DDeepak10/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
RRhys10/2/2022
how are you calling that function?
DDeepak10/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
RRhys10/2/2022
handleCick(); looks like it doesn't have any arguments passed into it haha yeah that'd do it
Solution
DDeepak10/2/2022
thanks , got it
UUUnknown User10/2/2022
Message Not Public
Sign In & Join Server To View
DDeepak10/2/2022
one more question. sorry for too many what if i don't use navigate inside useEffect is it necessary ?
RRhys10/2/2022
i don't think use effect is needed, you can use it without it
DDeepak10/2/2022
just like this
const navigate = useNavigate();
const handleCick = (searchInput) => {
navigate(`/menu/${searchInput}`);
};
const navigate = useNavigate();
const handleCick = (searchInput) => {
navigate(`/menu/${searchInput}`);
};
RRhys10/2/2022
yeah im pretty sure that'll work
DDeepak10/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 😀
RRhys10/2/2022
rubberduck talking it through is the best debugging technique there is
UUUnknown User10/2/2022
Message Not Public
Sign In & Join Server To View

Looking for more? Join the community!

R
Reactiflux

help-threads-react

Join Server