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
Due to limitations in React itself, [`popstate`][popstate] navigations cannot be Transition-enabled. Any state updates during a `popstate` event are [automatically][popstate-sync-pr][flushed][bsky-ricky-popstate] synchronously so that the browser can properly restore scroll position and form data.
148
-
149
-
However, the browser can only do this if the navigation is instant. If React Router needs to run loaders on a back navigation, the browser will not be able to restore scroll position or form data ([`<ScrollRestoration>`][scroll-restoration] can handle scroll position for you).
150
-
151
-
It is therefore not recommended to wrap `navigate(n)` navigations in `React.startTransition`
152
-
unless you can manage your pending UI with local Transition state (`React.useTransition`).
153
-
154
-
```tsx
155
-
// ❌ This won't work correctly
156
-
startTransition(() =>navigate(-1));
157
-
```
158
-
159
-
If you _need_ programmatic back-navigations to be Transition-friendly in your app, you can introduce a small hack to prevent React from detecting the event and letting the Transition work as expected. React checks `window.event` to determine if the state updates are part of a `popstate` event, so if you clear that out in your own listener you can trick React into treating it like any other state update:
160
-
161
-
```tsx
162
-
// Add this to the top of your browser entry file
163
-
window.addEventListener(
164
-
"popstate",
165
-
() => {
166
-
window.event=null;
167
-
},
168
-
{
169
-
capture: true,
170
-
},
171
-
);
172
-
```
173
-
174
-
<docs-warning>Please be aware this is a hack, has not been thoroughly tested, and may not continue to work if React changes their underlying implementation. We did get their [permission][ricky-bsky-event-hack] to mention it though 😉</docs-warning>
147
+
There is currently a bug with optimistic states and `popstate`. If you need to read the current route during a back navigation, which cannot complete synchronously (e.g. Suspends on uncached data), you can set the optimistic state before navigating back or defer the optimistic update in a timer or microtask.
0 commit comments