Skip to content

Commit 69ba50e

Browse files
chore: Update version for release (#11114)
1 parent ffd4373 commit 69ba50e

20 files changed

+27
-475
lines changed

.changeset/catch-unwrap-error.md

-5
This file was deleted.

.changeset/empty-ligers-walk.md

-6
This file was deleted.

.changeset/handle-falsy-errors.md

-5
This file was deleted.

.changeset/lemon-rivers-battle.md

-5
This file was deleted.

.changeset/partial-hydration-data.md

-44
This file was deleted.

.changeset/pre.json

-21
This file was deleted.

.changeset/pretty-dolphins-relax.md

-5
This file was deleted.

.changeset/relative-splat-path.md

-138
This file was deleted.

.changeset/serious-rivers-rest.md

-7
This file was deleted.

CHANGELOG.md

+6-126
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,7 @@ We manage release notes in this file instead of the paginated Github Releases Pa
1616
- [v6.21.0](#v6210)
1717
- [What's Changed](#whats-changed)
1818
- [`future.v7_relativeSplatPath`](#futurev7_relativesplatpath)
19+
- [Partial Hydration](#partial-hydration)
1920
- [Minor Changes](#minor-changes)
2021
- [Patch Changes](#patch-changes)
2122
- [v6.20.1](#v6201)
@@ -165,139 +166,18 @@ To add a new release, copy from this template:
165166

166167
We fixed a splat route path-resolution bug in `6.19.0`, but later determined a large number of applications were relying on the buggy behavior, so we reverted the fix in `6.20.1` (see [#10983](https://github.com/remix-run/react-router/issues/10983), [#11052](https://github.com/remix-run/react-router/issues/11052), [#11078](https://github.com/remix-run/react-router/issues/11078)).
167168

168-
The buggy behavior is that the default behavior when resolving relative paths inside a splat route would _ignore_ any splat (`*`) portion of the current route path.
169+
The buggy behavior is that the default behavior when resolving relative paths inside a splat route would _ignore_ any splat (`*`) portion of the current route path. When the future flag is enabled, splat portions are included in relative path logic within splat routes.
169170

170-
**Background**
171+
For more information, please refer to the [`useResolvedPath` docs](https://reactrouter.com/hooks/use-resolved-path#splat-paths) and/or the [detailed changelog entry](https://github.com/remix-run/react-router/blob/main/packages/react-router-dom/CHANGELOG.md#6210).
171172

172-
This decision was originally made thinking that it would make the concept of nested different sections of your apps in `<Routes>` easier if relative routing would _replace_ the current splat:
173+
#### Partial Hydration
173174

174-
```jsx
175-
<BrowserRouter>
176-
<Routes>
177-
<Route path="/" element={<Home />} />
178-
<Route path="dashboard/*" element={<Dashboard />} />
179-
</Routes>
180-
</BrowserRouter>
181-
```
182-
183-
Any paths like `/dashboard`, `/dashboard/team`, `/dashboard/projects` will match the `Dashboard` route. The dashboard component itself can then render nested `<Routes>`:
184-
185-
```jsx
186-
function Dashboard() {
187-
return (
188-
<div>
189-
<h2>Dashboard</h2>
190-
<nav>
191-
<Link to="/">Dashboard Home</Link>
192-
<Link to="team">Team</Link>
193-
<Link to="projects">Projects</Link>
194-
</nav>
195-
196-
<Routes>
197-
<Route path="/" element={<DashboardHome />} />
198-
<Route path="team" element={<DashboardTeam />} />
199-
<Route path="projects" element={<DashboardProjects />} />
200-
</Routes>
201-
</div>
202-
);
203-
}
204-
```
205-
206-
Now, all links and route paths are relative to the router above them. This makes code splitting and compartmentalizing your app really easy. You could render the `Dashboard` as its own independent app, or embed it into your large app without making any changes to it.
207-
208-
**The Problem**
209-
210-
The problem is that this concept of ignoring part of a path breaks a lot of other assumptions in React Router - namely that `"."` always means the current location pathname for that route. When we ignore the splat portion, we start getting invalid paths when using `"."`:
211-
212-
```jsx
213-
// If we are on URL /dashboard/team, and we want to link to /dashboard/team:
214-
function DashboardTeam() {
215-
// ❌ This is broken and results in <a href="/dashboard">
216-
return <Link to=".">A broken link to the Current URL</Link>;
217-
218-
// ✅ This is fixed but super unintuitive since we're already at /dashboard/team!
219-
return <Link to="./team">A broken link to the Current URL</Link>;
220-
}
221-
```
222-
223-
We've also introduced an issue that we can no longer move our `DashboardTeam` component around our route hierarchy easily - since it behaves differently if we're underneath a non-splat route, such as `/dashboard/:widget`. Now, our `"."` links will, properly point to ourself _inclusive of the dynamic param value_ so behavior will break from it's corresponding usage in a `/dashboard/*` route.
224-
225-
Furthermore, consider a nested splat route configuration:
226-
227-
```jsx
228-
<BrowserRouter>
229-
<Routes>
230-
<Route path="dashboard">
231-
<Route path="*" element={<Dashboard />} />
232-
</Route>
233-
</Routes>
234-
</BrowserRouter>
235-
```
236-
237-
Now, a `<Link to=".">` and a `<Link to="..">` inside the `Dashboard` component go to the same place! That is definitely not correct!
238-
239-
Another common issue arose in Data Routers (and Remix) where any `<Form>` should post to it's own route `action` if you the user doesn't specify a form action:
240-
241-
```jsx
242-
let router = createBrowserRouter({
243-
path: "/dashboard",
244-
children: [
245-
{
246-
path: "*",
247-
action: dashboardAction,
248-
Component() {
249-
// ❌ This form is broken! It throws a 405 error when it submits because
250-
// it tries to submit to /dashboard (without the splat value) and the parent
251-
// `/dashboard` route doesn't have an action
252-
return <Form method="post">...</Form>;
253-
},
254-
},
255-
],
256-
});
257-
```
258-
259-
This is just a compounded issue from the above because the default location for a `Form` to submit to is itself (`"."`) - and if we ignore the splat portion, that now resolves to the parent route.
260-
261-
**The Solution**
262-
263-
If you are leveraging this behavior, it's recommended to enable the `future.v7_relativeSplatPath` flag, move your splat to it's own `Route`, and leverage `../` for any links to "sibling" pages:
264-
265-
```jsx
266-
<BrowserRouter>
267-
<Routes>
268-
<Route path="dashboard">
269-
<Route path="*" element={<Dashboard />} />
270-
</Route>
271-
</Routes>
272-
</BrowserRouter>
273-
274-
function Dashboard() {
275-
return (
276-
<div>
277-
<h2>Dashboard</h2>
278-
<nav>
279-
<Link to="..">Dashboard Home</Link>
280-
<Link to="../team">Team</Link>
281-
<Link to="../projects">Projects</Link>
282-
</nav>
283-
284-
<Routes>
285-
<Route path="/" element={<DashboardHome />} />
286-
<Route path="team" element={<DashboardTeam />} />
287-
<Route path="projects" element={<DashboardProjects />} />
288-
</Router>
289-
</div>
290-
);
291-
}
292-
```
293-
294-
This way, `.` means "the full current pathname for my route" in all cases (including static, dynamic, and splat routes) and `..` always means "my parents pathname".
295-
296-
For more information, please see the [`useResolvedPath` docs](https://reactrouter.com/hooks/use-resolved-path#splat-paths).
175+
We added a new `future.v7_partialHydration` future flag for the `@remix-run/router` that enables partial hydration of a data router when Server-Side Rendering. This allows you to provide `hydrationData.loaderData` that has values for _some_ initially matched route loaders, but not all. When this flag is enabled, the router will call `loader` functions for routes that do not have hydration loader data during `router.initialize()`, and it will render down to the deepest provided `HydrateFallback` (up to the first route without hydration data) while it executes the unhydrated routes. ([#11033](https://github.com/remix-run/react-router/pull/11033))
297176

298177
### Minor Changes
299178

300179
- Add a new `future.v7_relativeSplatPath` flag to implement a breaking bug fix to relative routing when inside a splat route. ([#11087](https://github.com/remix-run/react-router/pull/11087))
180+
- Add a new `future.v7_partialHydration` future flag that enables partial hydration of a data router when Server-Side Rendering ([#11033](https://github.com/remix-run/react-router/pull/11033))
301181

302182
### Patch Changes
303183

0 commit comments

Comments
 (0)