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
@@ -165,139 +166,18 @@ To add a new release, copy from this template:
165
166
166
167
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)).
167
168
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.
169
170
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).
171
172
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:
Any paths like `/dashboard`, `/dashboard/team`, `/dashboard/projects` will match the `Dashboard` route. The dashboard component itself can then render nested `<Routes>`:
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
-
functionDashboardTeam() {
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:
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))
297
176
298
177
### Minor Changes
299
178
300
179
- 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))
0 commit comments