useNavigate
redirect
in loaders and actions than this hook
The useNavigate
hook returns a function that lets you navigate programmatically, for example in an effect:
import { useNavigate } from "react-router-dom"; function useLogoutTimer() { const userIsInactive = useFakeInactiveUser(); const navigate = useNavigate(); useEffect(() => { if (userIsInactive) { fake.logout(); navigate("/session-timed-out"); } }, [userIsInactive]); }
declare function useNavigate(): NavigateFunction; interface NavigateFunction { ( to: To, options?: { replace?: boolean; state?: any; relative?: RelativeRoutingType; } ): void; (delta: number): void; }
The navigate
function has two signatures:
To
value (same type as <Link to>
) with an optional second { replace, state }
arg ornavigate(-1)
is equivalent to hitting the back button.
© React Training 2015-2019
© Remix Software 2020-2022
Licensed under the MIT License (MIT).
https://reactrouterdotcom.fly.dev/docs/en/v6/hooks/use-navigate