Skip to content

Commit 5b02e7d

Browse files
brophdawg11brophdawg11
authored
Remove future.v7_partialHydration flag (#11725)
1 parent 618a5be commit 5b02e7d

17 files changed

+368
-754
lines changed

‎.changeset/tasty-penguins-live.md‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
---
2+
"react-router-dom": major
3+
"react-router": major
4+
---
5+
6+
- Remove the `future.v7_partialHydration` flag
7+
- This also removes the `<RouterProvider fallbackElement>` prop
8+
- To migrate, move the `fallbackElement` to a `hydrateFallbackElement`/`HydrateFallback` on your root route
9+
- Also worth nothing there is a related breaking changer with this future flag:
10+
- Without `future.v7_partialHydration` (when using `fallbackElement`), `state.navigation` was populated during the initial load
11+
- With `future.v7_partialHydration`, `state.navigation` remains in an `"idle"` state during the initial load

‎packages/react-router/__tests__/createRoutesFromChildren-test.tsx‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -19,12 +19,14 @@ describe("creating routes from JSX", () => {
1919
{
2020
"Component": undefined,
2121
"ErrorBoundary": undefined,
22+
"HydrateFallback": undefined,
2223
"action": undefined,
2324
"caseSensitive": undefined,
2425
"children": [
2526
{
2627
"Component": undefined,
2728
"ErrorBoundary": undefined,
29+
"HydrateFallback": undefined,
2830
"action": undefined,
2931
"caseSensitive": undefined,
3032
"element": <h1>
@@ -33,6 +35,7 @@ describe("creating routes from JSX", () => {
3335
"errorElement": undefined,
3436
"handle": undefined,
3537
"hasErrorBoundary": false,
38+
"hydrateFallbackElement": undefined,
3639
"id": "0-0",
3740
"index": undefined,
3841
"lazy": undefined,
@@ -43,6 +46,7 @@ describe("creating routes from JSX", () => {
4346
{
4447
"Component": undefined,
4548
"ErrorBoundary": undefined,
49+
"HydrateFallback": undefined,
4650
"action": undefined,
4751
"caseSensitive": undefined,
4852
"element": <h1>
@@ -51,6 +55,7 @@ describe("creating routes from JSX", () => {
5155
"errorElement": undefined,
5256
"handle": undefined,
5357
"hasErrorBoundary": false,
58+
"hydrateFallbackElement": undefined,
5459
"id": "0-1",
5560
"index": undefined,
5661
"lazy": undefined,
@@ -61,12 +66,14 @@ describe("creating routes from JSX", () => {
6166
{
6267
"Component": undefined,
6368
"ErrorBoundary": undefined,
69+
"HydrateFallback": undefined,
6470
"action": undefined,
6571
"caseSensitive": undefined,
6672
"children": [
6773
{
6874
"Component": undefined,
6975
"ErrorBoundary": undefined,
76+
"HydrateFallback": undefined,
7077
"action": undefined,
7178
"caseSensitive": undefined,
7279
"element": <h1>
@@ -75,6 +82,7 @@ describe("creating routes from JSX", () => {
7582
"errorElement": undefined,
7683
"handle": undefined,
7784
"hasErrorBoundary": false,
85+
"hydrateFallbackElement": undefined,
7886
"id": "0-2-0",
7987
"index": true,
8088
"lazy": undefined,
@@ -85,6 +93,7 @@ describe("creating routes from JSX", () => {
8593
{
8694
"Component": undefined,
8795
"ErrorBoundary": undefined,
96+
"HydrateFallback": undefined,
8897
"action": undefined,
8998
"caseSensitive": undefined,
9099
"element": <h1>
@@ -93,6 +102,7 @@ describe("creating routes from JSX", () => {
93102
"errorElement": undefined,
94103
"handle": undefined,
95104
"hasErrorBoundary": false,
105+
"hydrateFallbackElement": undefined,
96106
"id": "0-2-1",
97107
"index": undefined,
98108
"lazy": undefined,
@@ -105,6 +115,7 @@ describe("creating routes from JSX", () => {
105115
"errorElement": undefined,
106116
"handle": undefined,
107117
"hasErrorBoundary": false,
118+
"hydrateFallbackElement": undefined,
108119
"id": "0-2",
109120
"index": undefined,
110121
"lazy": undefined,
@@ -117,6 +128,7 @@ describe("creating routes from JSX", () => {
117128
"errorElement": undefined,
118129
"handle": undefined,
119130
"hasErrorBoundary": false,
131+
"hydrateFallbackElement": undefined,
120132
"id": "0",
121133
"index": undefined,
122134
"lazy": undefined,
@@ -153,12 +165,14 @@ describe("creating routes from JSX", () => {
153165
{
154166
"Component": undefined,
155167
"ErrorBoundary": undefined,
168+
"HydrateFallback": undefined,
156169
"action": undefined,
157170
"caseSensitive": undefined,
158171
"children": [
159172
{
160173
"Component": undefined,
161174
"ErrorBoundary": undefined,
175+
"HydrateFallback": undefined,
162176
"action": undefined,
163177
"caseSensitive": undefined,
164178
"element": <h1>
@@ -167,6 +181,7 @@ describe("creating routes from JSX", () => {
167181
"errorElement": undefined,
168182
"handle": undefined,
169183
"hasErrorBoundary": false,
184+
"hydrateFallbackElement": undefined,
170185
"id": "0-0",
171186
"index": undefined,
172187
"lazy": undefined,
@@ -177,12 +192,14 @@ describe("creating routes from JSX", () => {
177192
{
178193
"Component": undefined,
179194
"ErrorBoundary": undefined,
195+
"HydrateFallback": undefined,
180196
"action": undefined,
181197
"caseSensitive": undefined,
182198
"children": [
183199
{
184200
"Component": undefined,
185201
"ErrorBoundary": undefined,
202+
"HydrateFallback": undefined,
186203
"action": [Function],
187204
"caseSensitive": undefined,
188205
"element": <h1>
@@ -191,6 +208,7 @@ describe("creating routes from JSX", () => {
191208
"errorElement": undefined,
192209
"handle": undefined,
193210
"hasErrorBoundary": false,
211+
"hydrateFallbackElement": undefined,
194212
"id": "0-1-0",
195213
"index": true,
196214
"lazy": undefined,
@@ -203,6 +221,7 @@ describe("creating routes from JSX", () => {
203221
"errorElement": undefined,
204222
"handle": undefined,
205223
"hasErrorBoundary": false,
224+
"hydrateFallbackElement": undefined,
206225
"id": "0-1",
207226
"index": undefined,
208227
"lazy": undefined,
@@ -217,6 +236,7 @@ describe("creating routes from JSX", () => {
217236
</h1>,
218237
"handle": undefined,
219238
"hasErrorBoundary": true,
239+
"hydrateFallbackElement": undefined,
220240
"id": "0",
221241
"index": undefined,
222242
"lazy": undefined,

‎packages/react-router/__tests__/data-memory-router-test.tsx‎

Lines changed: 22 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -313,11 +313,15 @@ describe("createMemoryRouter", () => {
313313
`);
314314
});
315315

316-
it("renders fallbackElement while first data fetch happens", async () => {
316+
it("renders hydrateFallbackElement while first data fetch happens", async () => {
317317
let fooDefer = createDeferred();
318318
let router = createMemoryRouter(
319319
createRoutesFromElements(
320-
<Route path="/" element={<Outlet />}>
320+
<Route
321+
path="/"
322+
element={<Outlet />}
323+
hydrateFallbackElement={<FallbackElement />}
324+
>
321325
<Route path="foo" loader={() => fooDefer.promise} element={<Foo />} />
322326
<Route path="bar" element={<Bar />} />
323327
</Route>
@@ -326,9 +330,7 @@ describe("createMemoryRouter", () => {
326330
initialEntries: ["/foo"],
327331
}
328332
);
329-
let { container } = render(
330-
<RouterProvider router={router} fallbackElement={<FallbackElement />} />
331-
);
333+
let { container } = render(<RouterProvider router={router} />);
332334

333335
function FallbackElement() {
334336
return <p>Loading...</p>;
@@ -363,7 +365,7 @@ describe("createMemoryRouter", () => {
363365
`);
364366
});
365367

366-
it("renders a null fallbackElement if none is provided", async () => {
368+
it("renders a null fallback if none is provided", async () => {
367369
let fooDefer = createDeferred();
368370
let router = createMemoryRouter(
369371
createRoutesFromElements(
@@ -401,12 +403,16 @@ describe("createMemoryRouter", () => {
401403
`);
402404
});
403405

404-
it("does not render fallbackElement if no data fetch is required", async () => {
406+
it("does not render hydrateFallbackElement if no data fetch is required", async () => {
405407
let fooDefer = createDeferred();
406408

407409
let router = createMemoryRouter(
408410
createRoutesFromElements(
409-
<Route path="/" element={<Outlet />}>
411+
<Route
412+
path="/"
413+
element={<Outlet />}
414+
hydrateFallbackElement={<FallbackElement />}
415+
>
410416
<Route path="foo" loader={() => fooDefer.promise} element={<Foo />} />
411417
<Route path="bar" element={<Bar />} />
412418
</Route>
@@ -415,9 +421,7 @@ describe("createMemoryRouter", () => {
415421
initialEntries: ["/bar"],
416422
}
417423
);
418-
let { container } = render(
419-
<RouterProvider router={router} fallbackElement={<FallbackElement />} />
420-
);
424+
let { container } = render(<RouterProvider router={router} />);
421425

422426
function FallbackElement() {
423427
return <p>Loading...</p>;
@@ -441,19 +445,21 @@ describe("createMemoryRouter", () => {
441445
`);
442446
});
443447

444-
it("renders fallbackElement within router contexts", async () => {
448+
it("renders hydrateFallbackElement within router contexts", async () => {
445449
let fooDefer = createDeferred();
446450
let router = createMemoryRouter(
447451
createRoutesFromElements(
448-
<Route path="/" element={<Outlet />}>
452+
<Route
453+
path="/"
454+
element={<Outlet />}
455+
hydrateFallbackElement={<FallbackElement />}
456+
>
449457
<Route path="foo" loader={() => fooDefer.promise} element={<Foo />} />
450458
</Route>
451459
),
452460
{ initialEntries: ["/foo"] }
453461
);
454-
let { container } = render(
455-
<RouterProvider router={router} fallbackElement={<FallbackElement />} />
456-
);
462+
let { container } = render(<RouterProvider router={router} />);
457463

458464
function FallbackElement() {
459465
let location = useLocation();

‎packages/react-router/__tests__/dom/data-browser-router-test.tsx‎

Lines changed: 21 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -371,11 +371,15 @@ function testDomRouter(
371371
`);
372372
});
373373

374-
it("renders fallbackElement while first data fetch happens", async () => {
374+
it("renders hydrateFallbackElement while first data fetch happens", async () => {
375375
let fooDefer = createDeferred();
376376
let router = createTestRouter(
377377
createRoutesFromElements(
378-
<Route path="/" element={<Outlet />}>
378+
<Route
379+
path="/"
380+
element={<Outlet />}
381+
hydrateFallbackElement={<FallbackElement />}
382+
>
379383
<Route
380384
path="foo"
381385
loader={() => fooDefer.promise}
@@ -388,9 +392,7 @@ function testDomRouter(
388392
window: getWindow("/foo"),
389393
}
390394
);
391-
let { container } = render(
392-
<RouterProvider router={router} fallbackElement={<FallbackElement />} />
393-
);
395+
let { container } = render(<RouterProvider router={router} />);
394396

395397
function FallbackElement() {
396398
return <p>Loading...</p>;
@@ -425,11 +427,15 @@ function testDomRouter(
425427
`);
426428
});
427429

428-
it("renders fallbackElement while first data fetch and lazy route load happens", async () => {
430+
it("renders hydrateFallbackElement while first data fetch and lazy route load happens", async () => {
429431
let fooDefer = createDeferred();
430432
let router = createTestRouter(
431433
createRoutesFromElements(
432-
<Route path="/" element={<Outlet />}>
434+
<Route
435+
path="/"
436+
element={<Outlet />}
437+
hydrateFallbackElement={<FallbackElement />}
438+
>
433439
<Route
434440
path="foo"
435441
lazy={async () => {
@@ -446,9 +452,7 @@ function testDomRouter(
446452
window: getWindow("/foo"),
447453
}
448454
);
449-
let { container } = render(
450-
<RouterProvider router={router} fallbackElement={<FallbackElement />} />
451-
);
455+
let { container } = render(<RouterProvider router={router} />);
452456

453457
function FallbackElement() {
454458
return <p>Loading...</p>;
@@ -526,11 +530,15 @@ function testDomRouter(
526530
`);
527531
});
528532

529-
it("renders fallbackElement within router contexts", async () => {
533+
it("renders hydrateFallbackElement within router contexts", async () => {
530534
let fooDefer = createDeferred();
531535
let router = createTestRouter(
532536
createRoutesFromElements(
533-
<Route path="/" element={<Outlet />}>
537+
<Route
538+
path="/"
539+
element={<Outlet />}
540+
hydrateFallbackElement={<FallbackElement />}
541+
>
534542
<Route
535543
path="foo"
536544
loader={() => fooDefer.promise}
@@ -540,9 +548,7 @@ function testDomRouter(
540548
),
541549
{ window: getWindow("/foo") }
542550
);
543-
let { container } = render(
544-
<RouterProvider router={router} fallbackElement={<FallbackElement />} />
545-
);
551+
let { container } = render(<RouterProvider router={router} />);
546552

547553
function FallbackElement() {
548554
let location = useLocation();

0 commit comments

Comments
 (0)