Navigate component signature
Navigate is a component-based version of useNavigate for use in React.Component class components where hooks cannot be used. It has the signature: function Navigate({ to, replace, state, relative }: NavigateProps): null
React Router · API · all subjects
navigate
20 notes, read out of this brain and free to use. Each one was extracted from a source and is re-checked against its exam.
Navigate props overview
Navigate accepts the following props: to (string or Path object, required), replace (boolean), state (object for history.state), and relative (RelativeRoutingType).
Navigate 'to' prop
The 'to' prop specifies the path to navigate to. It can be a string or a Path object.
Navigate 'replace' prop
The 'replace' prop is a boolean that determines whether to replace the current entry in the History stack instead of adding a new one.
Navigate 'state' prop
The 'state' prop accepts an object to pass to the new Location and store in history.state.
Navigate 'relative' prop
The 'relative' prop determines how to interpret relative routing in the 'to' prop. It accepts a RelativeRoutingType value.
Navigate basic example
Example of using Navigate component: <Navigate to="/tasks" />
Navigate recommendation - use useNavigate instead
It is recommended to avoid using the Navigate component in favor of the useNavigate hook.
useNavigate navigate function signature
The returned navigate function has the signature `navigate(to, options?)` or `navigate(delta)`. The `to` parameter can be a string path, a `To` object, or a number (delta). The optional `options` parameter contains options for modifying the navigation.
useNavigate navigate options - all modes
The following options work in all modes (Framework, Data, and Declarative): `relative` (`"route"` or `"path"` to control relative routing logic), `replace` (replace the current entry in the History stack), and `state` (optional history.state to include with the new Location).
useNavigate navigate options - Framework and Data modes only
The following options only work in Framework and Data modes: `flushSync` (wrap the DOM updates in ReactDom.flushSync), `preventScrollReset` (do not scroll back to the top of the page after navigation), and `viewTransition` (enable document.startViewTransition for this navigation).
useNavigate basic example - go back
Example: `import { useNavigate } from "react-router"; function SomeComponent() { let navigate = useNavigate(); return (<button onClick={() => navigate(-1)}>Go Back</button>); }`
useNavigate navigate to string path
To navigate to another path using useNavigate, call `navigate("/some/route")` with a string path, or with query parameters like `navigate("/some/route?search=param")`.
useNavigate navigate with To object
Navigate using a `To` object with optional properties: `navigate({ pathname: "/some/route", search: "?search=param", hash: "#hash" }, { state: { some: "state" } })`. The state will be available on the Location object on the next page via `useLocation().state`.
useNavigate navigate back or forward in history
Use `navigate(-1)` to go back in the history stack, often used to close modals. Use `navigate(1)` to go forward, often used in multistep wizard workflows. Be cautious because there may not be a History entry to navigate to, or it could go somewhere unexpected.
useNavigate replace current history entry
To replace the current entry in the History stack with a new one (similar to a server side redirect), use `navigate("/some/route", { replace: true })`.
useNavigate preventScrollReset option
To prevent ScrollRestoration from resetting the scroll position after navigation, use `navigate("?some-tab=1", { preventScrollReset: true })`. This is useful for tab interfaces connected to search params that should not scroll to the top when a tab is clicked.
useNavigate return type difference between modes
In Declarative mode, useNavigate returns `void`. In Framework and Data modes, useNavigate returns `Promise<void>` that resolves when navigation completes. The actual return type is a union `void | Promise<void>`. In Framework/Data mode, the navigate function returns a stable reference that does not change identity across navigations.
useNavigate TypeScript type augmentation for RouterProvider
To avoid TypeScript errors when using RouterProvider or Framework mode, augment the NavigateFunction interface: `declare module "react-router" { interface NavigateFunction { (to: To, options?: NavigateOptions): Promise<void>; (delta: number): Promise<void>; } }`
useNavigate prefer redirect in actions and loaders
It is often better to use `redirect` in `action` and `loader` functions than the useNavigate hook for navigating after data mutations.