chore: Update version for release (#11114)

remix-run · Dec 13, 2023 · 69ba50e · 69ba50e
1 parent ffd4373
commit 69ba50e
Show file tree

Hide file tree

Showing 20 changed files with 27 additions and 475 deletions.
diff --git a/.changeset/catch-unwrap-error.md b/.changeset/catch-unwrap-error.md
diff --git a/.changeset/empty-ligers-walk.md b/.changeset/empty-ligers-walk.md
diff --git a/.changeset/handle-falsy-errors.md b/.changeset/handle-falsy-errors.md
diff --git a/.changeset/lemon-rivers-battle.md b/.changeset/lemon-rivers-battle.md
diff --git a/.changeset/partial-hydration-data.md b/.changeset/partial-hydration-data.md
diff --git a/.changeset/pre.json b/.changeset/pre.json
diff --git a/.changeset/pretty-dolphins-relax.md b/.changeset/pretty-dolphins-relax.md
diff --git a/.changeset/relative-splat-path.md b/.changeset/relative-splat-path.md
diff --git a/.changeset/serious-rivers-rest.md b/.changeset/serious-rivers-rest.md
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -16,6 +16,7 @@ We manage release notes in this file instead of the paginated Github Releases Pa
   - [v6.21.0](#v6210)
     - [What's Changed](#whats-changed)
       - [`future.v7_relativeSplatPath`](#futurev7_relativesplatpath)
+      - [Partial Hydration](#partial-hydration)
     - [Minor Changes](#minor-changes)
     - [Patch Changes](#patch-changes)
   - [v6.20.1](#v6201)
@@ -165,139 +166,18 @@ To add a new release, copy from this template:
 
 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)).
 
-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.
+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.
 
-**Background**
+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).
 
-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:
+#### Partial Hydration
 
-```jsx
-<BrowserRouter>
-  <Routes>
-    <Route path="/" element={<Home />} />
-    <Route path="dashboard/*" element={<Dashboard />} />
-  </Routes>
-</BrowserRouter>
-```
-
-Any paths like `/dashboard`, `/dashboard/team`, `/dashboard/projects` will match the `Dashboard` route. The dashboard component itself can then render nested `<Routes>`:
-
-```jsx
-function Dashboard() {
-  return (
-    <div>
-      <h2>Dashboard</h2>
-      <nav>
-        <Link to="/">Dashboard Home</Link>
-        <Link to="team">Team</Link>
-        <Link to="projects">Projects</Link>
-      </nav>
-
-      <Routes>
-        <Route path="/" element={<DashboardHome />} />
-        <Route path="team" element={<DashboardTeam />} />
-        <Route path="projects" element={<DashboardProjects />} />
-      </Routes>
-    </div>
-  );
-}
-```
-
-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.
-
-**The Problem**
-
-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 `"."`:
-
-```jsx
-// If we are on URL /dashboard/team, and we want to link to /dashboard/team:
-function DashboardTeam() {
-  // ❌ This is broken and results in <a href="/dashboard">
-  return <Link to=".">A broken link to the Current URL</Link>;
-
-  // ✅ This is fixed but super unintuitive since we're already at /dashboard/team!
-  return <Link to="./team">A broken link to the Current URL</Link>;
-}
-```
-
-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.
-
-Furthermore, consider a nested splat route configuration:
-
-```jsx
-<BrowserRouter>
-  <Routes>
-    <Route path="dashboard">
-      <Route path="*" element={<Dashboard />} />
-    </Route>
-  </Routes>
-</BrowserRouter>
-```
-
-Now, a `<Link to=".">` and a `<Link to="..">` inside the `Dashboard` component go to the same place! That is definitely not correct!
-
-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:
-
-```jsx
-let router = createBrowserRouter({
-  path: "/dashboard",
-  children: [
-    {
-      path: "*",
-      action: dashboardAction,
-      Component() {
-        // ❌ This form is broken!  It throws a 405 error when it submits because
-        // it tries to submit to /dashboard (without the splat value) and the parent
-        // `/dashboard` route doesn't have an action
-        return <Form method="post">...</Form>;
-      },
-    },
-  ],
-});
-```
-
-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.
-
-**The Solution**
-
-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:
-
-```jsx
-<BrowserRouter>
-  <Routes>
-    <Route path="dashboard">
-      <Route path="*" element={<Dashboard />} />
-    </Route>
-  </Routes>
-</BrowserRouter>
-
-function Dashboard() {
-  return (
-    <div>
-      <h2>Dashboard</h2>
-      <nav>
-        <Link to="..">Dashboard Home</Link>
-        <Link to="../team">Team</Link>
-        <Link to="../projects">Projects</Link>
-      </nav>
-
-      <Routes>
-        <Route path="/" element={<DashboardHome />} />
-        <Route path="team" element={<DashboardTeam />} />
-        <Route path="projects" element={<DashboardProjects />} />
-      </Router>
-    </div>
-  );
-}
-```
-
-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".
-
-For more information, please see the [`useResolvedPath` docs](https://reactrouter.com/hooks/use-resolved-path#splat-paths).
+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))
 
 ### Minor Changes
 
 - 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))
+- 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))
 
 ### Patch Changes