Returns a function that lets you navigate programmatically in the browser in response to user interactions or effects.
It's often better to use redirect
in action
/loader
functions than this hook.
The returned function signature is navigate(to, options?)
/navigate(delta)
where:
to
can be a string path, a To
object, or a number (delta)options
contains options for modifying the navigation
flushSync
: Wrap the DOM updates in ReactDom.flushSync
preventScrollReset
: Do not scroll back to the top of the page after navigationrelative
: "route"
or "path"
to control relative routing logicreplace
: Replace the current entry in the History
stackstate
: Optional history.state
to include with the new Location
viewTransition
: Enable document.startViewTransition
for this navigationimport { useNavigate } from "react-router";
function SomeComponent() {
let navigate = useNavigate();
return (
<button onClick={() => navigate(-1)}>
Go Back
</button>
);
}
function useNavigate(): NavigateFunction
A navigate function for programmatic navigation
navigate("/some/route");
navigate("/some/route?search=param");
To
objectAll properties are optional.
navigate({
pathname: "/some/route",
search: "?search=param",
hash: "#hash",
state: { some: "state" },
});
If you use state
, that will be available on the Location
object on
the next page. Access it with useLocation().state
(see useLocation
).
// back
// often used to close modals
navigate(-1);
// forward
// often used in a multistep wizard workflows
navigate(1);
Be cautious with navigate(number)
. If your application can load up to a
route that has a button that tries to navigate forward/back, there may not be
a [
History`](https://developer.mozilla.org/en-US/docs/Web/API/History)
entry to go back or forward to, or it can go somewhere you don't expect
(like a different domain).
Only use this if you're sure they will have an entry in the History
stack to navigate to.
This will remove the current entry in the History
stack, replacing it with a new one, similar to a server side redirect.
navigate("/some/route", { replace: true });
To prevent <ScrollRestoration>
from resetting
the scroll position, use the preventScrollReset
option.
navigate("?some-tab=1", { preventScrollReset: true });
For example, if you have a tab interface connected to search params in the middle of a page, and you don't want it to scroll to the top when a tab is clicked.