You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Returns the action data from the most recent POST navigation form submission or `undefined` if there hasn't been one.
24
+
Returns the [`action`](../../start/framework/route-module#action) data from the most recent `POST` navigation form submission or `undefined` if there hasn't been one.
Copy file name to clipboardExpand all lines: docs/api/hooks/useNavigate.md
+14-14Lines changed: 14 additions & 14 deletions
Original file line number
Diff line number
Diff line change
@@ -26,16 +26,16 @@ response to user interactions or effects.
26
26
27
27
It's often better to use [`redirect`](../utils/redirect) in [`action`](../../start/framework/route-module#action)/[`loader`](../../start/framework/route-module#loader) functions than this hook.
28
28
29
-
The returned function signature is `navigate(to, options?)/navigate(delta)` where:
29
+
The returned function signature is `navigate(to, options?)`/`navigate(delta)` where:
30
30
31
-
*`to` can be a string path, a `To` object, or a number (delta)
31
+
*`to` can be a string path, a [`To`](https://api.reactrouter.com/v7/types/react_router.To.html) object, or a number (delta)
32
32
*`options` contains options for modifying the navigation
33
-
*`flushSync`: Wrap the DOM updates in `ReactDom.flushSync`
33
+
*`flushSync`: Wrap the DOM updates in [`ReactDom.flushSync`](https://react.dev/reference/react-dom/flushSync)
34
34
*`preventScrollReset`: Do not scroll back to the top of the page after navigation
35
-
*`relative`: "route" or "path" to control relative routing logic
36
-
*`replace`: Replace the current entry in the history stack
37
-
*`state`: Optional history state to include with the new `Location`
38
-
*`viewTransition`: Enable `document.startViewTransition` for this navigation
35
+
*`relative`: `"route"` or `"path"` to control relative routing logic
36
+
*`replace`: Replace the current entry in the [`History`](https://developer.mozilla.org/en-US/docs/Web/API/History) stack
37
+
*`state`: Optional history state to include with the new [`Location`](https://api.reactrouter.com/v7/interfaces/react_router.Location.html)
38
+
*`viewTransition`: Enable [`document.startViewTransition`](https://developer.mozilla.org/en-US/docs/Web/API/Document/startViewTransition) for this navigation
39
39
40
40
```tsx
41
41
import { useNavigate } from"react-router";
@@ -65,7 +65,7 @@ navigate("/some/route");
65
65
navigate("/some/route?search=param");
66
66
```
67
67
68
-
### Navigate with a `To` object
68
+
### Navigate with a [`To`](https://api.reactrouter.com/v7/types/react_router.To.html) object
69
69
70
70
All properties are optional.
71
71
@@ -88,17 +88,17 @@ If you use `state`, that will be available on the `location` object on the next
88
88
navigate(-1);
89
89
90
90
// forward
91
-
// often used in a multi-step wizard workflows
91
+
// often used in a multistep wizard workflows
92
92
navigate(1);
93
93
```
94
94
95
-
Be cautions 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 entry to go back or forward to, or it can go somewhere you don't expect (like a different domain).
95
+
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).
96
96
97
-
Only use this if you're sure they will have an entry in the history stack to navigate to.
97
+
Only use this if you're sure they will have an entry in the [`History`](https://developer.mozilla.org/en-US/docs/Web/API/History) stack to navigate to.
98
98
99
99
### Replace the current entry in the history stack
100
100
101
-
This will remove the current entry in the history stack, replacing it with a new one, similar to a server side redirect.
101
+
This will remove the current entry in the [`History`](https://developer.mozilla.org/en-US/docs/Web/API/History) stack, replacing it with a new one, similar to a server side redirect.
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.
120
+
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.
Returns the current navigation, defaulting to an "idle" navigation when no navigation is in progress. You can use this to render pending UI (like a global spinner) or read FormData from a form navigation.
24
+
Returns the current [`Navigation`](https://api.reactrouter.com/v7/types/react_router.Navigation.html), defaulting to an "idle" navigation when no navigation is in progress. You can use this to render pending UI (like a global spinner) or read [`FormData`](https://developer.mozilla.org/en-US/docs/Web/API/FormData) from a form navigation.
Returns the current navigation action which describes how the router came to
25
-
the current location, either by a pop, push, or replace on the history stack.
24
+
Returns the current [`Navigation`](https://api.reactrouter.com/v7/types/react_router.Navigation.html) action which describes how the router came to
25
+
the current [`Location`](https://api.reactrouter.com/v7/interfaces/react_router.Location.html), either by a pop, push, or replace on the [`History`](https://developer.mozilla.org/en-US/docs/Web/API/History) stack.
0 commit comments