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
- Once the PR is merged, the release workflow will publish the updated packages to npm.
25
+
- At this point, you can begin crafting the release notes for the eventual stable release in the root `CHANGELOG.md` file in the repo
26
+
- Copy the template for a new release and update the version numbers and links accordingly
27
+
- Copy the relevant changelog entries from all packages into the release notes and adjust accordingly
28
+
- Commit these changes directly to the `release-*` branch - they will not trigger a new prerelease since they do not include a changeset
25
29
26
30
### Iterating a pre-release
27
31
@@ -34,6 +38,7 @@ You may need to make changes to a pre-release prior to publishing a final stable
34
38
- Wait for the release workflow to finish and the Changesets action to open its PR that will increment all versions.
35
39
- Review the PR, make any adjustments necessary, and merge it into the `release-*` branch.
36
40
- Once the PR is merged, the release workflow will publish the updated packages to npm.
41
+
- Make sure you copy over the new changeset contents into stable release notes in the root `CHANGELOG.md` file in the repo
37
42
38
43
### Publishing the stable release
39
44
@@ -42,10 +47,11 @@ You may need to make changes to a pre-release prior to publishing a final stable
42
47
- Wait for the release workflow to finish. The Changesets action in the workflow will open a PR that will increment all versions and generate the changelogs for the stable release.
43
48
- Review the updated `CHANGELOG` files and make any adjustments necessary.
Copy file name to clipboardExpand all lines: docs/components/nav-link.md
+8-6Lines changed: 8 additions & 6 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -93,12 +93,14 @@ You can pass a render prop as children to customize the content of the `<NavLink
93
93
94
94
The `end` prop changes the matching logic for the `active` and `pending` states to only match to the "end" of the NavLink's `to` path. If the URL is longer than `to`, it will no longer be considered active.
The `useBlocker` hook allows you to prevent the user from navigating away from the current location, and present them with a custom UI to allow them to confirm the navigation.
62
+
63
+
<docs-info>
64
+
This only works for client-side navigations within your React Router application and will not block document requests. To prevent document navigations you will need to add your own <ahref="https://developer.mozilla.org/en-US/docs/Web/API/Window/beforeunload_event"target="_blank">`beforeunload`</a> event handler.
65
+
</docs-info>
66
+
67
+
<docs-warning>
68
+
Blocking a user from navigating is a bit of an anti-pattern, so please carefully consider any usage of this hook and use it sparingly. In the de-facto use case of preventing a user navigating away from a half-filled form, you might consider persisting unsaved state to `sessionStorage` and automatically re-filling it if they return instead of blocking them from navigating away.
69
+
</docs-warning>
70
+
71
+
```tsx
72
+
function ImportantForm() {
73
+
let [value, setValue] =React.useState("");
74
+
75
+
// Block navigating elsewhere when data has been entered into the input
76
+
let blocker =useBlocker(
77
+
({ currentLocation, nextLocation }) =>
78
+
value!==""&&
79
+
currentLocation.pathname!==nextLocation.pathname
80
+
);
81
+
82
+
return (
83
+
<Formmethod="post">
84
+
<label>
85
+
Enter some important data:
86
+
<input
87
+
name="data"
88
+
value={value}
89
+
onChange={(e) =>setValue(e.target.value)}
90
+
/>
91
+
</label>
92
+
<buttontype="submit">Save</button>
93
+
94
+
{blocker.state==="blocked"? (
95
+
<div>
96
+
<p>Are you sure you want to leave?</p>
97
+
<buttononClick={() =>blocker.proceed()}>
98
+
Proceed
99
+
</button>
100
+
<buttononClick={() =>blocker.reset()}>
101
+
Cancel
102
+
</button>
103
+
</div>
104
+
) :null}
105
+
</Form>
106
+
);
107
+
}
108
+
```
109
+
110
+
For a more complete example, please refer to the [example][example] in the repository.
111
+
112
+
## Properties
113
+
114
+
### `state`
115
+
116
+
The current state of the blocker
117
+
118
+
-`unblocked` - the blocker is idle and has not prevented any navigation
119
+
-`blocked` - the blocker has prevented a navigation
120
+
-`proceeding` - the blocker is proceeding through from a blocked navigation
121
+
122
+
### `location`
123
+
124
+
When in a `blocked` state, this represents the location to which we blocked a navigation. When in a `proceeding` state, this is the location being navigated to after a `blocker.proceed()` call.
125
+
126
+
## Methods
127
+
128
+
### `proceed()`
129
+
130
+
When in a `blocked` state, you may call `blocker.proceed()` to proceed to the blocked location.
131
+
132
+
### `reset()`
133
+
134
+
When in a `blocked` state, you may call `blocker.reset()` to return the blocker back to an `unblocked` state and leave the user at the current location.
Copy file name to clipboardExpand all lines: docs/hooks/use-fetcher.md
+10-2Lines changed: 10 additions & 2 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -107,7 +107,7 @@ function SomeComponent() {
107
107
108
108
## Methods
109
109
110
-
## `fetcher.load()`
110
+
###`fetcher.load(href, options)`
111
111
112
112
Loads data from a route loader.
113
113
@@ -133,7 +133,13 @@ If you find yourself calling this function inside of click handlers, you can pro
133
133
134
134
<docs-info>Any `fetcher.load` calls that are active on the page will be re-executed as part of revalidation (either after a navigation submission, another fetcher submission, or a `useRevalidator()` call)</docs-info>
135
135
136
-
## `fetcher.submit()`
136
+
#### `options.unstable_flushSync`
137
+
138
+
The `unstable_flushSync` option tells React Router DOM to wrap the initial state update for this `fetcher.load` in a [`ReactDOM.flushSync`][flush-sync] call instead of the default [`React.startTransition`][start-transition]. This allows you to perform synchronous DOM actions immediately after the update is flushed to the DOM.
139
+
140
+
<docs-warning>Please note that this API is marked unstable and may be subject to breaking changes without a major release</docs-warning>
141
+
142
+
### `fetcher.submit()`
137
143
138
144
The imperative version of `<fetcher.Form>`. If a user interaction should initiate the fetch, you should use `<fetcher.Form>`. But if you, the programmer are initiating the fetch (not in response to a user clicking a button, etc.), then use this function.
Copy file name to clipboardExpand all lines: docs/hooks/use-navigate.md
+12Lines changed: 12 additions & 0 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -20,6 +20,8 @@ interface NavigateOptions {
20
20
state?:any;
21
21
preventScrollReset?:boolean;
22
22
relative?:RelativeRoutingType;
23
+
unstable_flushSync?:boolean;
24
+
unstable_viewTransition?:boolean;
23
25
}
24
26
25
27
typeRelativeRoutingType="route"|"path";
@@ -89,6 +91,14 @@ function EditContact() {
89
91
}
90
92
```
91
93
94
+
## `options.unstable_flushSync`
95
+
96
+
The `unstable_flushSync` option tells React Router DOM to wrap the initial state update for this navigation in a [`ReactDOM.flushSync`][flush-sync] call instead of the default [`React.startTransition`][start-transition]. This allows you to perform synchronous DOM actions immediately after the update is flushed to the DOM.
97
+
98
+
<docs-warning>`unstable_flushSync` only works when using a data router, see [Picking a Router][picking-a-router]</docs-warning>
99
+
100
+
<docs-warning>Please note that this API is marked unstable and may be subject to breaking changes without a major release</docs-warning>
101
+
92
102
## `options.unstable_viewTransition`
93
103
94
104
The `unstable_viewTransition` option enables a [View Transition][view-transitions] for this navigation by wrapping the final state update in `document.startViewTransition()`. If you need to apply specific styles for this view transition, you will also need to leverage the [`unstable_useViewTransitionState()`][use-view-transition-state].
@@ -107,3 +117,5 @@ The `unstable_viewTransition` option enables a [View Transition][view-transition
The `unstable_usePrompt` hook allows you to prompt the user for confirmation via [`window.confirm`][window-confirm] prior to navigating away from the current location.
46
+
47
+
<docs-info>
48
+
This only works for client-side navigations within your React Router application and will not block document requests. To prevent document navigations you will need to add your own <a href="https://developer.mozilla.org/en-US/docs/Web/API/Window/beforeunload_event" target="_blank">`beforeunload`</a> event handler.
49
+
</docs-info>
50
+
51
+
<docs-warning>
52
+
Blocking a user from navigating is a bit of an anti-pattern, so please carefully consider any usage of this hook and use it sparingly. In the de-facto use case of preventing a user navigating away from a half-filled form, you might consider persisting unsaved state to `sessionStorage` and automatically re-filling it if they return instead of blocking them from navigating away.
53
+
</docs-warning>
54
+
55
+
<docs-warning>
56
+
We do not plan to remove the `unstable_` prefix from this hook because the behavior is non-deterministic across browsers when the prompt is open, so React Router cannot guarantee correct behavior in all scenarios. To avoid this non-determinism, we recommend using `useBlocker` instead which also gives you control over the confirmation UX.
57
+
</docs-warning>
58
+
59
+
```tsx
60
+
function ImportantForm() {
61
+
let [value, setValue] =React.useState("");
62
+
63
+
// Block navigating elsewhere when data has been entered into the input
Copy file name to clipboardExpand all lines: docs/hooks/use-submit.md
+8Lines changed: 8 additions & 0 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -160,5 +160,13 @@ Because submissions are navigations, the options may also contain the other navi
160
160
-`state`
161
161
-`unstable_viewTransition`
162
162
163
+
### `options.unstable_flushSync`
164
+
165
+
The `unstable_flushSync` option tells React Router DOM to wrap the initial state update for this submission in a [`ReactDOM.flushSync`][flush-sync] call instead of the default [`React.startTransition`][start-transition]. This allows you to perform synchronous DOM actions immediately after the update is flushed to the DOM.
166
+
167
+
<docs-warning>Please note that this API is marked unstable and may be subject to breaking changes without a major release</docs-warning>
0 commit comments