Skip to content

Commit 89cdbaf

Browse files
committed
docs updates for useNavigate
closes #8559
1 parent d1aaa2d commit 89cdbaf

File tree

1 file changed

+71
-1
lines changed

1 file changed

+71
-1
lines changed

docs/api/hooks/useNavigate.md

Lines changed: 71 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -32,5 +32,75 @@ It's often better to use [redirect](../utils/redirect) in [ActionFunction](../Ot
3232
## Signature
3333

3434
```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>;
3646
```
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.
101+
102+
```tsx
103+
navigate("?some-tab=1", { preventScrollReset: true });
104+
```
105+
106+
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

Comments
 (0)