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
R
Rhys563d 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
D
Deepak563d ago
yes, its helpful Thanks
R
Rhys563d ago
👍 you can use a reaction if you want to mark this thread as solved - happy it helped meowthumbsup
R
Rhys563d 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
D
Deepak563d 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
R
Rhys563d ago
how are you calling that function?
D
Deepak563d 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
R
Rhys563d ago
handleCick(); looks like it doesn't have any arguments passed into it haha yeah that'd do it
Solution
D
Deepak563d ago
thanks , got it
UU
Unknown User563d ago
D
Deepak563d ago
one more question. sorry for too many what if i don't use navigate inside useEffect is it necessary ?
R
Rhys563d ago
i don't think use effect is needed, you can use it without it
D
Deepak563d ago
just like this
const navigate = useNavigate();
const handleCick = (searchInput) => {
navigate(`/menu/${searchInput}`);
};
const navigate = useNavigate();
const handleCick = (searchInput) => {
navigate(`/menu/${searchInput}`);
};
R
Rhys563d ago
yeah im pretty sure that'll work
D
Deepak563d 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 😀
R
Rhys563d ago
rubberduck talking it through is the best debugging technique there is
UU
Unknown User562d ago