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
Copy file name to clipboardExpand all lines: .changeset/relative-splat-path.md
+3-3Lines changed: 3 additions & 3 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -6,9 +6,9 @@
6
6
"@remix-run/router": minor
7
7
---
8
8
9
-
Add a new `future.v7_relativeSplatPath` flag to implenent a breaking bug fix to relative routing when inside a splat route.
9
+
Add a new `future.v7_relativeSplatPath` flag to implement a breaking bug fix to relative routing when inside a splat route.
10
10
11
-
This fix was originally added in [#10983](https://github.com/remix-run/react-router/issues/10983) and was later reverted in [#11078](https://github.com/remix-run/react-router/issues/110788) because it was determined that a large number of existing applications were relying on the buggy behavior (see [#11052](https://github.com/remix-run/react-router/issues/11052))
11
+
This fix was originally added in [#10983](https://github.com/remix-run/react-router/issues/10983) and was later reverted in [#11078](https://github.com/remix-run/react-router/pull/11078) because it was determined that a large number of existing applications were relying on the buggy behavior (see [#11052](https://github.com/remix-run/react-router/issues/11052))
12
12
13
13
**The Bug**
14
14
The buggy behavior is that without this flag, the default behavior when resolving relative paths is to _ignore_ any splat (`*`) portion of the current route path.
@@ -52,7 +52,7 @@ Now, all links and route paths are relative to the router above them. This makes
52
52
53
53
**The Problem**
54
54
55
-
The problem is that this concept of ignoring part of a pth 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 `"."`:
55
+
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 `"."`:
56
56
57
57
```jsx
58
58
// If we are on URL /dashboard/team, and we want to link to /dashboard/team:
@@ -152,6 +157,154 @@ To add a new release, copy from this template:
152
157
153
158
-->
154
159
160
+
## v6.21.0
161
+
162
+
### What's Changed
163
+
164
+
#### `future.v7_relativeSplatPath`
165
+
166
+
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
+
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
+
170
+
**Background**
171
+
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.
206
+
207
+
**The Problem**
208
+
209
+
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 `"."`:
210
+
211
+
```jsx
212
+
// If we are on URL /dashboard/team, and we want to link to /dashboard/team:
213
+
functionDashboardTeam() {
214
+
// ❌ This is broken and results in <a href="/dashboard">
215
+
return<Link to=".">A broken link to the Current URL</Link>;
216
+
217
+
// ✅ This is fixed but super unintuitive since we're already at /dashboard/team!
218
+
return<Link to="./team">A broken link to the Current URL</Link>;
219
+
}
220
+
```
221
+
222
+
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.
223
+
224
+
Furthermore, consider a nested splat route configuration:
225
+
226
+
```jsx
227
+
<BrowserRouter>
228
+
<Routes>
229
+
<Route path="dashboard">
230
+
<Route path="*" element={<Dashboard />} />
231
+
</Route>
232
+
</Routes>
233
+
</BrowserRouter>
234
+
```
235
+
236
+
Now, a `<Link to=".">` and a `<Link to="..">` inside the `Dashboard` component go to the same place! That is definitely not correct!
237
+
238
+
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:
239
+
240
+
```jsx
241
+
let router =createBrowserRouter({
242
+
path:"/dashboard",
243
+
children: [
244
+
{
245
+
path:"*",
246
+
action: dashboardAction,
247
+
Component() {
248
+
// ❌ This form is broken! It throws a 405 error when it submits because
249
+
// it tries to submit to /dashboard (without the splat value) and the parent
250
+
// `/dashboard` route doesn't have an action
251
+
return<Form method="post">...</Form>;
252
+
},
253
+
},
254
+
],
255
+
});
256
+
```
257
+
258
+
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.
259
+
260
+
**The Solution**
261
+
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".
293
+
294
+
For more information, please see the [`useResolvedPath` docs](https://reactrouter.com/hooks/use-resolved-path#splat-paths).
295
+
296
+
### Minor Changes
297
+
298
+
- 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))
299
+
300
+
### Patch Changes
301
+
302
+
- Properly handle falsy error values in `ErrorBoundary`'s ([#11071](https://github.com/remix-run/react-router/pull/11071))
303
+
- Catch and bubble errors thrown when trying to unwrap responses from `loader`/`action` functions ([#11061](https://github.com/remix-run/react-router/pull/11061))
304
+
- Fix `relative="path"` issue when rendering `Link`/`NavLink` outside of matched routes ([#11062](https://github.com/remix-run/react-router/pull/11062))
Copy file name to clipboardExpand all lines: packages/react-router-dom-v5-compat/CHANGELOG.md
+3-3Lines changed: 3 additions & 3 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -4,9 +4,9 @@
4
4
5
5
### Minor Changes
6
6
7
-
- Add a new `future.v7_relativeSplatPath` flag to implenent a breaking bug fix to relative routing when inside a splat route. ([#11087](https://github.com/remix-run/react-router/pull/11087))
7
+
- 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))
8
8
9
-
This fix was originally added in [#10983](https://github.com/remix-run/react-router/issues/10983) and was later reverted in [#11078](https://github.com/remix-run/react-router/issues/110788) because it was determined that a large number of existing applications were relying on the buggy behavior (see [#11052](https://github.com/remix-run/react-router/issues/11052))
9
+
This fix was originally added in [#10983](https://github.com/remix-run/react-router/issues/10983) and was later reverted in [#11078](https://github.com/remix-run/react-router/pull/11078) because it was determined that a large number of existing applications were relying on the buggy behavior (see [#11052](https://github.com/remix-run/react-router/issues/11052))
10
10
11
11
**The Bug**
12
12
The buggy behavior is that without this flag, the default behavior when resolving relative paths is to _ignore_ any splat (`*`) portion of the current route path.
@@ -50,7 +50,7 @@
50
50
51
51
**The Problem**
52
52
53
-
The problem is that this concept of ignoring part of a pth 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 `"."`:
53
+
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 `"."`:
54
54
55
55
```jsx
56
56
// If we are on URL /dashboard/team, and we want to link to /dashboard/team:
0 commit comments