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
Copy file name to clipboardExpand all lines: docs/api/hooks/useNavigate.md
+71-1Lines changed: 71 additions & 1 deletion
Original file line number
Diff line number
Diff line change
@@ -32,5 +32,75 @@ It's often better to use [redirect](../utils/redirect) in [ActionFunction](../Ot
32
32
## Signature
33
33
34
34
```tsx
35
-
useNavigate(): NavigateFunction
35
+
navigate(
36
+
to: To,
37
+
options?: {
38
+
flushSync?: boolean;
39
+
preventScrollReset?:boolean;
40
+
relative?:RelativeRoutingType;
41
+
replace?:boolean;
42
+
state?:any;
43
+
viewTransition?:boolean;
44
+
}
45
+
): void|Promise<void>;
36
46
```
47
+
48
+
## Examples
49
+
50
+
### Navigate to another path:
51
+
52
+
```tsx
53
+
navigate("/some/route");
54
+
navigate("/some/route?search=param");
55
+
```
56
+
57
+
### Navigate with a `To` object:
58
+
59
+
All properties are optional.
60
+
61
+
```tsx
62
+
navigate({
63
+
pathname: "/some/route",
64
+
search: "?search=param",
65
+
hash: "#hash",
66
+
state: { some: "state" },
67
+
});
68
+
```
69
+
70
+
If you use `state`, that will be available on the `location` object on the next page. Access it with `useLocation().state` (see [useLocation](./useLocation)).
71
+
72
+
### Navigate back or forward in the history stack:
73
+
74
+
```tsx
75
+
// back
76
+
// often used to close modals
77
+
navigate(-1);
78
+
79
+
// forward
80
+
// often used in a multi-step wizard workflows
81
+
navigate(1);
82
+
```
83
+
84
+
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).
85
+
86
+
Only use this if you're sure they will have an entry in the history stack to navigate to.
87
+
88
+
### Replace the current entry in the history stack:
89
+
90
+
This will remove the current entry in the history stack, replacing it with a new one, similar to a server side redirect.
91
+
92
+
```tsx
93
+
navigate("/some/route", { replace: true });
94
+
```
95
+
96
+
### Prevent Scroll Reset
97
+
98
+
[modes: framework, data]
99
+
100
+
To prevent `<ScrollRestoration>` from resetting the scroll position, use the `preventScrollReset` option.
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.
0 commit comments