1 | # `react-router-dom`
|
2 |
|
3 | ## 6.22.3
|
4 |
|
5 | ### Patch Changes
|
6 |
|
7 | - Updated dependencies:
|
8 | - `@remix-run/router@1.15.3`
|
9 | - `react-router@6.22.3`
|
10 |
|
11 | ## 6.22.2
|
12 |
|
13 | ### Patch Changes
|
14 |
|
15 | - Updated dependencies:
|
16 | - `@remix-run/router@1.15.2`
|
17 | - `react-router@6.22.2`
|
18 |
|
19 | ## 6.22.1
|
20 |
|
21 | ### Patch Changes
|
22 |
|
23 | - Updated dependencies:
|
24 | - `react-router@6.22.1`
|
25 | - `@remix-run/router@1.15.1`
|
26 |
|
27 | ## 6.22.0
|
28 |
|
29 | ### Minor Changes
|
30 |
|
31 | - Include a `window__reactRouterVersion` tag for CWV Report detection ([#11222](https://github.com/remix-run/react-router/pull/11222))
|
32 |
|
33 | ### Patch Changes
|
34 |
|
35 | - Updated dependencies:
|
36 | - `@remix-run/router@1.15.0`
|
37 | - `react-router@6.22.0`
|
38 |
|
39 | ## 6.21.3
|
40 |
|
41 | ### Patch Changes
|
42 |
|
43 | - Fix `NavLink` `isPending` when a `basename` is used ([#11195](https://github.com/remix-run/react-router/pull/11195))
|
44 | - Remove leftover `unstable_` prefix from `Blocker`/`BlockerFunction` types ([#11187](https://github.com/remix-run/react-router/pull/11187))
|
45 | - Updated dependencies:
|
46 | - `react-router@6.21.3`
|
47 |
|
48 | ## 6.21.2
|
49 |
|
50 | ### Patch Changes
|
51 |
|
52 | - Leverage `useId` for internal fetcher keys when available ([#11166](https://github.com/remix-run/react-router/pull/11166))
|
53 | - Updated dependencies:
|
54 | - `@remix-run/router@1.14.2`
|
55 | - `react-router@6.21.2`
|
56 |
|
57 | ## 6.21.1
|
58 |
|
59 | ### Patch Changes
|
60 |
|
61 | - Updated dependencies:
|
62 | - `react-router@6.21.1`
|
63 | - `@remix-run/router@1.14.1`
|
64 |
|
65 | ## 6.21.0
|
66 |
|
67 | ### Minor Changes
|
68 |
|
69 | - 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))
|
70 |
|
71 | 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))
|
72 |
|
73 | **The Bug**
|
74 | 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.
|
75 |
|
76 | **The Background**
|
77 | 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:
|
78 |
|
79 | ```jsx
|
80 | <BrowserRouter>
|
81 | <Routes>
|
82 | <Route path="/" element={<Home />} />
|
83 | <Route path="dashboard/*" element={<Dashboard />} />
|
84 | </Routes>
|
85 | </BrowserRouter>
|
86 | ```
|
87 |
|
88 | Any paths like `/dashboard`, `/dashboard/team`, `/dashboard/projects` will match the `Dashboard` route. The dashboard component itself can then render nested `<Routes>`:
|
89 |
|
90 | ```jsx
|
91 | function Dashboard() {
|
92 | return (
|
93 | <div>
|
94 | <h2>Dashboard</h2>
|
95 | <nav>
|
96 | <Link to="/">Dashboard Home</Link>
|
97 | <Link to="team">Team</Link>
|
98 | <Link to="projects">Projects</Link>
|
99 | </nav>
|
100 |
|
101 | <Routes>
|
102 | <Route path="/" element={<DashboardHome />} />
|
103 | <Route path="team" element={<DashboardTeam />} />
|
104 | <Route path="projects" element={<DashboardProjects />} />
|
105 | </Routes>
|
106 | </div>
|
107 | );
|
108 | }
|
109 | ```
|
110 |
|
111 | 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.
|
112 |
|
113 | **The Problem**
|
114 |
|
115 | 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 `"."`:
|
116 |
|
117 | ```jsx
|
118 | // If we are on URL /dashboard/team, and we want to link to /dashboard/team:
|
119 | function DashboardTeam() {
|
120 | // ❌ This is broken and results in <a href="/dashboard">
|
121 | return <Link to=".">A broken link to the Current URL</Link>;
|
122 |
|
123 | // ✅ This is fixed but super unintuitive since we're already at /dashboard/team!
|
124 | return <Link to="./team">A broken link to the Current URL</Link>;
|
125 | }
|
126 | ```
|
127 |
|
128 | 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.
|
129 |
|
130 | Even worse, consider a nested splat route configuration:
|
131 |
|
132 | ```jsx
|
133 | <BrowserRouter>
|
134 | <Routes>
|
135 | <Route path="dashboard">
|
136 | <Route path="*" element={<Dashboard />} />
|
137 | </Route>
|
138 | </Routes>
|
139 | </BrowserRouter>
|
140 | ```
|
141 |
|
142 | Now, a `<Link to=".">` and a `<Link to="..">` inside the `Dashboard` component go to the same place! That is definitely not correct!
|
143 |
|
144 | 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:
|
145 |
|
146 | ```jsx
|
147 | let router = createBrowserRouter({
|
148 | path: "/dashboard",
|
149 | children: [
|
150 | {
|
151 | path: "*",
|
152 | action: dashboardAction,
|
153 | Component() {
|
154 | // ❌ This form is broken! It throws a 405 error when it submits because
|
155 | // it tries to submit to /dashboard (without the splat value) and the parent
|
156 | // `/dashboard` route doesn't have an action
|
157 | return <Form method="post">...</Form>;
|
158 | },
|
159 | },
|
160 | ],
|
161 | });
|
162 | ```
|
163 |
|
164 | 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.
|
165 |
|
166 | **The Solution**
|
167 | If you are leveraging this behavior, it's recommended to enable the future flag, move your splat to it's own route, and leverage `../` for any links to "sibling" pages:
|
168 |
|
169 | ```jsx
|
170 | <BrowserRouter>
|
171 | <Routes>
|
172 | <Route path="dashboard">
|
173 | <Route index path="*" element={<Dashboard />} />
|
174 | </Route>
|
175 | </Routes>
|
176 | </BrowserRouter>
|
177 |
|
178 | function Dashboard() {
|
179 | return (
|
180 | <div>
|
181 | <h2>Dashboard</h2>
|
182 | <nav>
|
183 | <Link to="..">Dashboard Home</Link>
|
184 | <Link to="../team">Team</Link>
|
185 | <Link to="../projects">Projects</Link>
|
186 | </nav>
|
187 |
|
188 | <Routes>
|
189 | <Route path="/" element={<DashboardHome />} />
|
190 | <Route path="team" element={<DashboardTeam />} />
|
191 | <Route path="projects" element={<DashboardProjects />} />
|
192 | </Router>
|
193 | </div>
|
194 | );
|
195 | }
|
196 | ```
|
197 |
|
198 | 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".
|
199 |
|
200 | ### Patch Changes
|
201 |
|
202 | - Updated dependencies:
|
203 | - `@remix-run/router@1.14.0`
|
204 | - `react-router@6.21.0`
|
205 |
|
206 | ## 6.20.1
|
207 |
|
208 | ### Patch Changes
|
209 |
|
210 | - Revert the `useResolvedPath` fix for splat routes due to a large number of applications that were relying on the buggy behavior (see <https://github.com/remix-run/react-router/issues/11052#issuecomment-1836589329>). We plan to re-introduce this fix behind a future flag in the next minor version. ([#11078](https://github.com/remix-run/react-router/pull/11078))
|
211 | - Updated dependencies:
|
212 | - `react-router@6.20.1`
|
213 | - `@remix-run/router@1.13.1`
|
214 |
|
215 | ## 6.20.0
|
216 |
|
217 | ### Minor Changes
|
218 |
|
219 | - Export the `PathParam` type from the public API ([#10719](https://github.com/remix-run/react-router/pull/10719))
|
220 |
|
221 | ### Patch Changes
|
222 |
|
223 | - Updated dependencies:
|
224 | - `react-router@6.20.0`
|
225 | - `@remix-run/router@1.13.0`
|
226 |
|
227 | ## 6.19.0
|
228 |
|
229 | ### Minor Changes
|
230 |
|
231 | - Add `unstable_flushSync` option to `useNavigate`/`useSumbit`/`fetcher.load`/`fetcher.submit` to opt-out of `React.startTransition` and into `ReactDOM.flushSync` for state updates ([#11005](https://github.com/remix-run/react-router/pull/11005))
|
232 | - Allow `unstable_usePrompt` to accept a `BlockerFunction` in addition to a `boolean` ([#10991](https://github.com/remix-run/react-router/pull/10991))
|
233 |
|
234 | ### Patch Changes
|
235 |
|
236 | - Fix issue where a changing fetcher `key` in a `useFetcher` that remains mounted wasn't getting picked up ([#11009](https://github.com/remix-run/react-router/pull/11009))
|
237 | - Fix `useFormAction` which was incorrectly inheriting the `?index` query param from child route `action` submissions ([#11025](https://github.com/remix-run/react-router/pull/11025))
|
238 | - Fix `NavLink` `active` logic when `to` location has a trailing slash ([#10734](https://github.com/remix-run/react-router/pull/10734))
|
239 | - Updated dependencies:
|
240 | - `react-router@6.19.0`
|
241 | - `@remix-run/router@1.12.0`
|
242 |
|
243 | ## 6.18.0
|
244 |
|
245 | ### Minor Changes
|
246 |
|
247 | - Add support for manual fetcher key specification via `useFetcher({ key: string })` so you can access the same fetcher instance from different components in your application without prop-drilling ([RFC](https://github.com/remix-run/remix/discussions/7698)) ([#10960](https://github.com/remix-run/react-router/pull/10960))
|
248 |
|
249 | - Fetcher keys are now also exposed on the fetchers returned from `useFetchers` so that they can be looked up by `key`
|
250 |
|
251 | - Add `navigate`/`fetcherKey` params/props to `useSumbit`/`Form` to support kicking off a fetcher submission under the hood with an optionally user-specified `key` ([#10960](https://github.com/remix-run/react-router/pull/10960))
|
252 |
|
253 | - Invoking a fetcher in this way is ephemeral and stateless
|
254 | - If you need to access the state of one of these fetchers, you will need to leverage `useFetcher({ key })` to look it up elsewhere
|
255 |
|
256 | ### Patch Changes
|
257 |
|
258 | - Adds a fetcher context to `RouterProvider` that holds completed fetcher data, in preparation for the upcoming future flag that will change the fetcher persistence/cleanup behavior ([#10961](https://github.com/remix-run/react-router/pull/10961))
|
259 | - Fix the `future` prop on `BrowserRouter`, `HashRouter` and `MemoryRouter` so that it accepts a `Partial<FutureConfig>` instead of requiring all flags to be included. ([#10962](https://github.com/remix-run/react-router/pull/10962))
|
260 | - Updated dependencies:
|
261 | - `@remix-run/router@1.11.0`
|
262 | - `react-router@6.18.0`
|
263 |
|
264 | ## 6.17.0
|
265 |
|
266 | ### Minor Changes
|
267 |
|
268 | - Add experimental support for the [View Transitions API](https://developer.mozilla.org/en-US/docs/Web/API/ViewTransition) via `document.startViewTransition` to enable CSS animated transitions on SPA navigations in your application. ([#10916](https://github.com/remix-run/react-router/pull/10916))
|
269 |
|
270 | The simplest approach to enabling a View Transition in your React Router app is via the new `<Link unstable_viewTransition>` prop. This will cause the navigation DOM update to be wrapped in `document.startViewTransition` which will enable transitions for the DOM update. Without any additional CSS styles, you'll get a basic cross-fade animation for your page.
|
271 |
|
272 | If you need to apply more fine-grained styles for your animations, you can leverage the `unstable_useViewTransitionState` hook which will tell you when a transition is in progress and you can use that to apply classes or styles:
|
273 |
|
274 | ```jsx
|
275 | function ImageLink(to, src, alt) {
|
276 | let isTransitioning = unstable_useViewTransitionState(to);
|
277 | return (
|
278 | <Link to={to} unstable_viewTransition>
|
279 | <img
|
280 | src={src}
|
281 | alt={alt}
|
282 | style={{
|
283 | viewTransitionName: isTransitioning ? "image-expand" : "",
|
284 | }}
|
285 | />
|
286 | </Link>
|
287 | );
|
288 | }
|
289 | ```
|
290 |
|
291 | You can also use the `<NavLink unstable_viewTransition>` shorthand which will manage the hook usage for you and automatically add a `transitioning` class to the `<a>` during the transition:
|
292 |
|
293 | ```css
|
294 | a.transitioning img {
|
295 | view-transition-name: "image-expand";
|
296 | }
|
297 | ```
|
298 |
|
299 | ```jsx
|
300 | <NavLink to={to} unstable_viewTransition>
|
301 | <img src={src} alt={alt} />
|
302 | </NavLink>
|
303 | ```
|
304 |
|
305 | For an example usage of View Transitions with React Router, check out [our fork](https://github.com/brophdawg11/react-router-records) of the [Astro Records](https://github.com/Charca/astro-records) demo.
|
306 |
|
307 | For more information on using the View Transitions API, please refer to the [Smooth and simple transitions with the View Transitions API](https://developer.chrome.com/docs/web-platform/view-transitions/) guide from the Google Chrome team.
|
308 |
|
309 | Please note, that because the `ViewTransition` API is a DOM API, we now export a specific `RouterProvider` from `react-router-dom` with this functionality. If you are importing `RouterProvider` from `react-router`, then it will not support view transitions. ([#10928](https://github.com/remix-run/react-router/pull/10928)
|
310 |
|
311 | ### Patch Changes
|
312 |
|
313 | - Log a warning and fail gracefully in `ScrollRestoration` when `sessionStorage` is unavailable ([#10848](https://github.com/remix-run/react-router/pull/10848))
|
314 | - Updated dependencies:
|
315 | - `@remix-run/router@1.10.0`
|
316 | - `react-router@6.17.0`
|
317 |
|
318 | ## 6.16.0
|
319 |
|
320 | ### Minor Changes
|
321 |
|
322 | - Updated dependencies:
|
323 | - `@remix-run/router@1.9.0`
|
324 | - `react-router@6.16.0`
|
325 |
|
326 | ### Patch Changes
|
327 |
|
328 | - Properly encode rendered URIs in server rendering to avoid hydration errors ([#10769](https://github.com/remix-run/react-router/pull/10769))
|
329 |
|
330 | ## 6.15.0
|
331 |
|
332 | ### Minor Changes
|
333 |
|
334 | - Add's a new `redirectDocument()` function which allows users to specify that a redirect from a `loader`/`action` should trigger a document reload (via `window.location`) instead of attempting to navigate to the redirected location via React Router ([#10705](https://github.com/remix-run/react-router/pull/10705))
|
335 |
|
336 | ### Patch Changes
|
337 |
|
338 | - Fixes an edge-case affecting web extensions in Firefox that use `URLSearchParams` and the `useSearchParams` hook. ([#10620](https://github.com/remix-run/react-router/pull/10620))
|
339 | - Do not include hash in `useFormAction()` for unspecified actions since it cannot be determined on the server and causes hydration issues ([#10758](https://github.com/remix-run/react-router/pull/10758))
|
340 | - Reorder effects in `unstable_usePrompt` to avoid throwing an exception if the prompt is unblocked and a navigation is performed synchronously ([#10687](https://github.com/remix-run/react-router/pull/10687), [#10718](https://github.com/remix-run/react-router/pull/10718))
|
341 | - Updated dependencies:
|
342 | - `@remix-run/router@1.8.0`
|
343 | - `react-router@6.15.0`
|
344 |
|
345 | ## 6.14.2
|
346 |
|
347 | ### Patch Changes
|
348 |
|
349 | - Properly decode element id when emulating hash scrolling via `<ScrollRestoration>` ([#10682](https://github.com/remix-run/react-router/pull/10682))
|
350 | - Add missing `<Form state>` prop to populate `history.state` on submission navigations ([#10630](https://github.com/remix-run/react-router/pull/10630))
|
351 | - Support proper hydration of `Error` subclasses such as `ReferenceError`/`TypeError` ([#10633](https://github.com/remix-run/react-router/pull/10633))
|
352 | - Updated dependencies:
|
353 | - `@remix-run/router@1.7.2`
|
354 | - `react-router@6.14.2`
|
355 |
|
356 | ## 6.14.1
|
357 |
|
358 | ### Patch Changes
|
359 |
|
360 | - Updated dependencies:
|
361 | - `react-router@6.14.1`
|
362 | - `@remix-run/router@1.7.1`
|
363 |
|
364 | ## 6.14.0
|
365 |
|
366 | ### Minor Changes
|
367 |
|
368 | - Add support for `application/json` and `text/plain` encodings for `useSubmit`/`fetcher.submit`. To reflect these additional types, `useNavigation`/`useFetcher` now also contain `navigation.json`/`navigation.text` and `fetcher.json`/`fetcher.text` which include the json/text submission if applicable ([#10413](https://github.com/remix-run/react-router/pull/10413))
|
369 |
|
370 | ```jsx
|
371 | // The default behavior will still serialize as FormData
|
372 | function Component() {
|
373 | let navigation = useNavigation();
|
374 | let submit = useSubmit();
|
375 | submit({ key: "value" }, { method: "post" });
|
376 | // navigation.formEncType => "application/x-www-form-urlencoded"
|
377 | // navigation.formData => FormData instance
|
378 | }
|
379 |
|
380 | async function action({ request }) {
|
381 | // request.headers.get("Content-Type") => "application/x-www-form-urlencoded"
|
382 | // await request.formData() => FormData instance
|
383 | }
|
384 | ```
|
385 |
|
386 | ```js
|
387 | // Opt-into JSON encoding with `encType: "application/json"`
|
388 | function Component() {
|
389 | let navigation = useNavigation();
|
390 | let submit = useSubmit();
|
391 | submit({ key: "value" }, { method: "post", encType: "application/json" });
|
392 | // navigation.formEncType => "application/json"
|
393 | // navigation.json => { key: "value" }
|
394 | }
|
395 |
|
396 | async function action({ request }) {
|
397 | // request.headers.get("Content-Type") => "application/json"
|
398 | // await request.json() => { key: "value" }
|
399 | }
|
400 | ```
|
401 |
|
402 | ```js
|
403 | // Opt-into text encoding with `encType: "text/plain"`
|
404 | function Component() {
|
405 | let navigation = useNavigation();
|
406 | let submit = useSubmit();
|
407 | submit("Text submission", { method: "post", encType: "text/plain" });
|
408 | // navigation.formEncType => "text/plain"
|
409 | // navigation.text => "Text submission"
|
410 | }
|
411 |
|
412 | async function action({ request }) {
|
413 | // request.headers.get("Content-Type") => "text/plain"
|
414 | // await request.text() => "Text submission"
|
415 | }
|
416 | ```
|
417 |
|
418 | ### Patch Changes
|
419 |
|
420 | - When submitting a form from a `submitter` element, prefer the built-in `new FormData(form, submitter)` instead of the previous manual approach in modern browsers (those that support the new `submitter` parameter) ([#9865](https://github.com/remix-run/react-router/pull/9865), [#10627](https://github.com/remix-run/react-router/pull/10627))
|
421 | - For browsers that don't support it, we continue to just append the submit button's entry to the end, and we also add rudimentary support for `type="image"` buttons
|
422 | - If developers want full spec-compliant support for legacy browsers, they can use the `formdata-submitter-polyfill`
|
423 | - Call `window.history.pushState/replaceState` before updating React Router state (instead of after) so that `window.location` matches `useLocation` during synchronous React 17 rendering ([#10448](https://github.com/remix-run/react-router/pull/10448))
|
424 | - ⚠️ However, generally apps should not be relying on `window.location` and should always reference `useLocation` when possible, as `window.location` will not be in sync 100% of the time (due to `popstate` events, concurrent mode, etc.)
|
425 | - Fix `tsc --skipLibCheck:false` issues on React 17 ([#10622](https://github.com/remix-run/react-router/pull/10622))
|
426 | - Upgrade `typescript` to 5.1 ([#10581](https://github.com/remix-run/react-router/pull/10581))
|
427 | - Updated dependencies:
|
428 | - `react-router@6.14.0`
|
429 | - `@remix-run/router@1.7.0`
|
430 |
|
431 | ## 6.13.0
|
432 |
|
433 | ### Minor Changes
|
434 |
|
435 | - Move [`React.startTransition`](https://react.dev/reference/react/startTransition) usage behind a [future flag](https://reactrouter.com/en/main/guides/api-development-strategy) to avoid issues with existing incompatible `Suspense` usages. We recommend folks adopting this flag to be better compatible with React concurrent mode, but if you run into issues you can continue without the use of `startTransition` until v7. Issues usually boils down to creating net-new promises during the render cycle, so if you run into issues you should either lift your promise creation out of the render cycle or put it behind a `useMemo`. ([#10596](https://github.com/remix-run/react-router/pull/10596))
|
436 |
|
437 | Existing behavior will no longer include `React.startTransition`:
|
438 |
|
439 | ```jsx
|
440 | <BrowserRouter>
|
441 | <Routes>{/*...*/}</Routes>
|
442 | </BrowserRouter>
|
443 |
|
444 | <RouterProvider router={router} />
|
445 | ```
|
446 |
|
447 | If you wish to enable `React.startTransition`, pass the future flag to your component:
|
448 |
|
449 | ```jsx
|
450 | <BrowserRouter future={{ v7_startTransition: true }}>
|
451 | <Routes>{/*...*/}</Routes>
|
452 | </BrowserRouter>
|
453 |
|
454 | <RouterProvider router={router} future={{ v7_startTransition: true }}/>
|
455 | ```
|
456 |
|
457 | ### Patch Changes
|
458 |
|
459 | - Work around webpack/terser `React.startTransition` minification bug in production mode ([#10588](https://github.com/remix-run/react-router/pull/10588))
|
460 | - Updated dependencies:
|
461 | - `react-router@6.13.0`
|
462 |
|
463 | ## 6.12.1
|
464 |
|
465 | > \[!WARNING]
|
466 | > Please use version `6.13.0` or later instead of `6.12.1`. This version suffers from a `webpack`/`terser` minification issue resulting in invalid minified code in your resulting production bundles which can cause issues in your application. See [#10579](https://github.com/remix-run/react-router/issues/10579) for more details.
|
467 |
|
468 | ### Patch Changes
|
469 |
|
470 | - Adjust feature detection of `React.startTransition` to fix webpack + react 17 compilation error ([#10569](https://github.com/remix-run/react-router/pull/10569))
|
471 | - Updated dependencies:
|
472 | - `react-router@6.12.1`
|
473 |
|
474 | ## 6.12.0
|
475 |
|
476 | ### Minor Changes
|
477 |
|
478 | - Wrap internal router state updates with `React.startTransition` if it exists ([#10438](https://github.com/remix-run/react-router/pull/10438))
|
479 |
|
480 | ### Patch Changes
|
481 |
|
482 | - Re-throw `DOMException` (`DataCloneError`) when attempting to perform a `PUSH` navigation with non-serializable state. ([#10427](https://github.com/remix-run/react-router/pull/10427))
|
483 | - Updated dependencies:
|
484 | - `@remix-run/router@1.6.3`
|
485 | - `react-router@6.12.0`
|
486 |
|
487 | ## 6.11.2
|
488 |
|
489 | ### Patch Changes
|
490 |
|
491 | - Export `SetURLSearchParams` type ([#10444](https://github.com/remix-run/react-router/pull/10444))
|
492 | - Updated dependencies:
|
493 | - `react-router@6.11.2`
|
494 | - `@remix-run/router@1.6.2`
|
495 |
|
496 | ## 6.11.1
|
497 |
|
498 | ### Patch Changes
|
499 |
|
500 | - Updated dependencies:
|
501 | - `react-router@6.11.1`
|
502 | - `@remix-run/router@1.6.1`
|
503 |
|
504 | ## 6.11.0
|
505 |
|
506 | ### Minor Changes
|
507 |
|
508 | - Enable `basename` support in `useFetcher` ([#10336](https://github.com/remix-run/react-router/pull/10336))
|
509 | - If you were previously working around this issue by manually prepending the `basename` then you will need to remove the manually prepended `basename` from your `fetcher` calls (`fetcher.load('/basename/route') -> fetcher.load('/route')`)
|
510 |
|
511 | ### Patch Changes
|
512 |
|
513 | - Fix inadvertent re-renders when using `Component` instead of `element` on a route definition ([#10287](https://github.com/remix-run/react-router/pull/10287))
|
514 | - Fail gracefully on `<Link to="//">` and other invalid URL values ([#10367](https://github.com/remix-run/react-router/pull/10367))
|
515 | - Switched from `useSyncExternalStore` to `useState` for internal `@remix-run/router` router state syncing in `<RouterProvider>`. We found some [subtle bugs](https://codesandbox.io/s/use-sync-external-store-loop-9g7b81) where router state updates got propagated _before_ other normal `useState` updates, which could lead to footguns in `useEffect` calls. ([#10377](https://github.com/remix-run/react-router/pull/10377), [#10409](https://github.com/remix-run/react-router/pull/10409))
|
516 | - Add static prop to `StaticRouterProvider`'s internal `Router` component ([#10401](https://github.com/remix-run/react-router/pull/10401))
|
517 | - When using a `RouterProvider`, `useNavigate`/`useSubmit`/`fetcher.submit` are now stable across location changes, since we can handle relative routing via the `@remix-run/router` instance and get rid of our dependence on `useLocation()`. When using `BrowserRouter`, these hooks remain unstable across location changes because they still rely on `useLocation()`. ([#10336](https://github.com/remix-run/react-router/pull/10336))
|
518 | - Updated dependencies:
|
519 | - `react-router@6.11.0`
|
520 | - `@remix-run/router@1.6.0`
|
521 |
|
522 | ## 6.10.0
|
523 |
|
524 | ### Minor Changes
|
525 |
|
526 | - Added support for [**Future Flags**](https://reactrouter.com/en/main/guides/api-development-strategy) in React Router. The first flag being introduced is `future.v7_normalizeFormMethod` which will normalize the exposed `useNavigation()/useFetcher()` `formMethod` fields as uppercase HTTP methods to align with the `fetch()` behavior. ([#10207](https://github.com/remix-run/react-router/pull/10207))
|
527 |
|
528 | - When `future.v7_normalizeFormMethod === false` (default v6 behavior),
|
529 | - `useNavigation().formMethod` is lowercase
|
530 | - `useFetcher().formMethod` is lowercase
|
531 | - When `future.v7_normalizeFormMethod === true`:
|
532 | - `useNavigation().formMethod` is uppercase
|
533 | - `useFetcher().formMethod` is uppercase
|
534 |
|
535 | ### Patch Changes
|
536 |
|
537 | - Fix `createStaticHandler` to also check for `ErrorBoundary` on routes in addition to `errorElement` ([#10190](https://github.com/remix-run/react-router/pull/10190))
|
538 | - Updated dependencies:
|
539 | - `@remix-run/router@1.5.0`
|
540 | - `react-router@6.10.0`
|
541 |
|
542 | ## 6.9.0
|
543 |
|
544 | ### Minor Changes
|
545 |
|
546 | - React Router now supports an alternative way to define your route `element` and `errorElement` fields as React Components instead of React Elements. You can instead pass a React Component to the new `Component` and `ErrorBoundary` fields if you choose. There is no functional difference between the two, so use whichever approach you prefer 😀. You shouldn't be defining both, but if you do `Component`/`ErrorBoundary` will "win". ([#10045](https://github.com/remix-run/react-router/pull/10045))
|
547 |
|
548 | **Example JSON Syntax**
|
549 |
|
550 | ```jsx
|
551 | // Both of these work the same:
|
552 | const elementRoutes = [{
|
553 | path: '/',
|
554 | element: <Home />,
|
555 | errorElement: <HomeError />,
|
556 | }]
|
557 |
|
558 | const componentRoutes = [{
|
559 | path: '/',
|
560 | Component: Home,
|
561 | ErrorBoundary: HomeError,
|
562 | }]
|
563 |
|
564 | function Home() { ... }
|
565 | function HomeError() { ... }
|
566 | ```
|
567 |
|
568 | **Example JSX Syntax**
|
569 |
|
570 | ```jsx
|
571 | // Both of these work the same:
|
572 | const elementRoutes = createRoutesFromElements(
|
573 | <Route path='/' element={<Home />} errorElement={<HomeError /> } />
|
574 | );
|
575 |
|
576 | const componentRoutes = createRoutesFromElements(
|
577 | <Route path='/' Component={Home} ErrorBoundary={HomeError} />
|
578 | );
|
579 |
|
580 | function Home() { ... }
|
581 | function HomeError() { ... }
|
582 | ```
|
583 |
|
584 | - **Introducing Lazy Route Modules!** ([#10045](https://github.com/remix-run/react-router/pull/10045))
|
585 |
|
586 | In order to keep your application bundles small and support code-splitting of your routes, we've introduced a new `lazy()` route property. This is an async function that resolves the non-route-matching portions of your route definition (`loader`, `action`, `element`/`Component`, `errorElement`/`ErrorBoundary`, `shouldRevalidate`, `handle`).
|
587 |
|
588 | Lazy routes are resolved on initial load and during the `loading` or `submitting` phase of a navigation or fetcher call. You cannot lazily define route-matching properties (`path`, `index`, `children`) since we only execute your lazy route functions after we've matched known routes.
|
589 |
|
590 | Your `lazy` functions will typically return the result of a dynamic import.
|
591 |
|
592 | ```jsx
|
593 | // In this example, we assume most folks land on the homepage so we include that
|
594 | // in our critical-path bundle, but then we lazily load modules for /a and /b so
|
595 | // they don't load until the user navigates to those routes
|
596 | let routes = createRoutesFromElements(
|
597 | <Route path="/" element={<Layout />}>
|
598 | <Route index element={<Home />} />
|
599 | <Route path="a" lazy={() => import("./a")} />
|
600 | <Route path="b" lazy={() => import("./b")} />
|
601 | </Route>
|
602 | );
|
603 | ```
|
604 |
|
605 | Then in your lazy route modules, export the properties you want defined for the route:
|
606 |
|
607 | ```jsx
|
608 | export async function loader({ request }) {
|
609 | let data = await fetchData(request);
|
610 | return json(data);
|
611 | }
|
612 |
|
613 | // Export a `Component` directly instead of needing to create a React Element from it
|
614 | export function Component() {
|
615 | let data = useLoaderData();
|
616 |
|
617 | return (
|
618 | <>
|
619 | <h1>You made it!</h1>
|
620 | <p>{data}</p>
|
621 | </>
|
622 | );
|
623 | }
|
624 |
|
625 | // Export an `ErrorBoundary` directly instead of needing to create a React Element from it
|
626 | export function ErrorBoundary() {
|
627 | let error = useRouteError();
|
628 | return isRouteErrorResponse(error) ? (
|
629 | <h1>
|
630 | {error.status} {error.statusText}
|
631 | </h1>
|
632 | ) : (
|
633 | <h1>{error.message || error}</h1>
|
634 | );
|
635 | }
|
636 | ```
|
637 |
|
638 | An example of this in action can be found in the [`examples/lazy-loading-router-provider`](https://github.com/remix-run/react-router/tree/main/examples/lazy-loading-router-provider) directory of the repository.
|
639 |
|
640 | 🙌 Huge thanks to @rossipedia for the [Initial Proposal](https://github.com/remix-run/react-router/discussions/9826) and [POC Implementation](https://github.com/remix-run/react-router/pull/9830).
|
641 |
|
642 | - Updated dependencies:
|
643 | - `react-router@6.9.0`
|
644 | - `@remix-run/router@1.4.0`
|
645 |
|
646 | ## 6.8.2
|
647 |
|
648 | ### Patch Changes
|
649 |
|
650 | - Treat same-origin absolute URLs in `<Link to>` as external if they are outside of the router `basename` ([#10135](https://github.com/remix-run/react-router/pull/10135))
|
651 | - Fix `useBlocker` to return `IDLE_BLOCKER` during SSR ([#10046](https://github.com/remix-run/react-router/pull/10046))
|
652 | - Fix SSR of absolute `<Link to>` urls ([#10112](https://github.com/remix-run/react-router/pull/10112))
|
653 | - Properly escape HTML characters in `StaticRouterProvider` serialized hydration data ([#10068](https://github.com/remix-run/react-router/pull/10068))
|
654 | - Updated dependencies:
|
655 | - `@remix-run/router@1.3.3`
|
656 | - `react-router@6.8.2`
|
657 |
|
658 | ## 6.8.1
|
659 |
|
660 | ### Patch Changes
|
661 |
|
662 | - Improved absolute url detection in `Link` component (now also supports `mailto:` urls) ([#9994](https://github.com/remix-run/react-router/pull/9994))
|
663 | - Fix partial object (search or hash only) pathnames losing current path value ([#10029](https://github.com/remix-run/react-router/pull/10029))
|
664 | - Updated dependencies:
|
665 | - `react-router@6.8.1`
|
666 | - `@remix-run/router@1.3.2`
|
667 |
|
668 | ## 6.8.0
|
669 |
|
670 | ### Minor Changes
|
671 |
|
672 | - Support absolute URLs in `<Link to>`. If the URL is for the current origin, it will still do a client-side navigation. If the URL is for a different origin then it will do a fresh document request for the new origin. ([#9900](https://github.com/remix-run/react-router/pull/9900))
|
673 |
|
674 | ```tsx
|
675 | <Link to="https://neworigin.com/some/path"> {/* Document request */}
|
676 | <Link to="//neworigin.com/some/path"> {/* Document request */}
|
677 | <Link to="https://www.currentorigin.com/path"> {/* Client-side navigation */}
|
678 | ```
|
679 |
|
680 | ### Patch Changes
|
681 |
|
682 | - Fix bug with search params removal via `useSearchParams` ([#9969](https://github.com/remix-run/react-router/pull/9969))
|
683 | - Respect `preventScrollReset` on `<fetcher.Form>` ([#9963](https://github.com/remix-run/react-router/pull/9963))
|
684 | - Fix navigation for hash routers on manual URL changes ([#9980](https://github.com/remix-run/react-router/pull/9980))
|
685 | - Use `pagehide` instead of `beforeunload` for `<ScrollRestoration>`. This has better cross-browser support, specifically on Mobile Safari. ([#9945](https://github.com/remix-run/react-router/pull/9945))
|
686 | - Updated dependencies:
|
687 | - `@remix-run/router@1.3.1`
|
688 | - `react-router@6.8.0`
|
689 |
|
690 | ## 6.7.0
|
691 |
|
692 | ### Minor Changes
|
693 |
|
694 | - Add `unstable_useBlocker` hook for blocking navigations within the app's location origin ([#9709](https://github.com/remix-run/react-router/pull/9709))
|
695 | - Add `unstable_usePrompt` hook for blocking navigations within the app's location origin ([#9932](https://github.com/remix-run/react-router/pull/9932))
|
696 | - Add `preventScrollReset` prop to `<Form>` ([#9886](https://github.com/remix-run/react-router/pull/9886))
|
697 |
|
698 | ### Patch Changes
|
699 |
|
700 | - Added pass-through event listener options argument to `useBeforeUnload` ([#9709](https://github.com/remix-run/react-router/pull/9709))
|
701 | - Streamline jsdom bug workaround in tests ([#9824](https://github.com/remix-run/react-router/pull/9824))
|
702 | - Updated dependencies:
|
703 | - `@remix-run/router@1.3.0`
|
704 | - `react-router@6.7.0`
|
705 |
|
706 | ## 6.6.2
|
707 |
|
708 | ### Patch Changes
|
709 |
|
710 | - Ensure `useId` consistency during SSR ([#9805](https://github.com/remix-run/react-router/pull/9805))
|
711 | - Updated dependencies:
|
712 | - `react-router@6.6.2`
|
713 |
|
714 | ## 6.6.1
|
715 |
|
716 | ### Patch Changes
|
717 |
|
718 | - Updated dependencies:
|
719 | - `@remix-run/router@1.2.1`
|
720 | - `react-router@6.6.1`
|
721 |
|
722 | ## 6.6.0
|
723 |
|
724 | ### Minor Changes
|
725 |
|
726 | - Add `useBeforeUnload()` hook ([#9664](https://github.com/remix-run/react-router/pull/9664))
|
727 | - Remove `unstable_` prefix from `createStaticHandler`/`createStaticRouter`/`StaticRouterProvider` ([#9738](https://github.com/remix-run/react-router/pull/9738))
|
728 |
|
729 | ### Patch Changes
|
730 |
|
731 | - Proper hydration of `Error` objects from `StaticRouterProvider` ([#9664](https://github.com/remix-run/react-router/pull/9664))
|
732 | - Support uppercase `<Form method>` and `useSubmit` method values ([#9664](https://github.com/remix-run/react-router/pull/9664))
|
733 | - Skip initial scroll restoration for SSR apps with `hydrationData` ([#9664](https://github.com/remix-run/react-router/pull/9664))
|
734 | - Fix `<button formmethod>` form submission overriddes ([#9664](https://github.com/remix-run/react-router/pull/9664))
|
735 | - Updated dependencies:
|
736 | - `@remix-run/router@1.2.0`
|
737 | - `react-router@6.6.0`
|
738 |
|
739 | ## 6.5.0
|
740 |
|
741 | ### Patch Changes
|
742 |
|
743 | - Updated dependencies:
|
744 | - `react-router@6.5.0`
|
745 | - `@remix-run/router@1.1.0`
|
746 |
|
747 | ## 6.4.5
|
748 |
|
749 | ### Patch Changes
|
750 |
|
751 | - Updated dependencies:
|
752 | - `@remix-run/router@1.0.5`
|
753 | - `react-router@6.4.5`
|
754 |
|
755 | ## 6.4.4
|
756 |
|
757 | ### Patch Changes
|
758 |
|
759 | - Fix issues with encoded characters in `NavLink` and descendant `<Routes>` ([#9589](https://github.com/remix-run/react-router/pull/9589), [#9647](https://github.com/remix-run/react-router/pull/9647))
|
760 | - Properly serialize/deserialize `ErrorResponse` instances when using built-in hydration ([#9593](https://github.com/remix-run/react-router/pull/9593))
|
761 | - Support `basename` in static data routers ([#9591](https://github.com/remix-run/react-router/pull/9591))
|
762 | - Updated dependencies:
|
763 | - `@remix-run/router@1.0.4`
|
764 | - `react-router@6.4.4`
|
765 |
|
766 | ## 6.4.3
|
767 |
|
768 | ### Patch Changes
|
769 |
|
770 | - Fix hrefs generated for `createHashRouter` ([#9409](https://github.com/remix-run/react-router/pull/9409))
|
771 | - fix encoding/matching issues with special chars ([#9477](https://github.com/remix-run/react-router/pull/9477), [#9496](https://github.com/remix-run/react-router/pull/9496))
|
772 | - Properly support `index` routes with a `path` in `useResolvedPath` ([#9486](https://github.com/remix-run/react-router/pull/9486))
|
773 | - Respect `relative=path` prop on `NavLink` ([#9453](https://github.com/remix-run/react-router/pull/9453))
|
774 | - Fix `NavLink` behavior for root urls ([#9497](https://github.com/remix-run/react-router/pull/9497))
|
775 | - Updated dependencies:
|
776 | - `@remix-run/router@1.0.3`
|
777 | - `react-router@6.4.3`
|
778 |
|
779 | ## 6.4.2
|
780 |
|
781 | ### Patch Changes
|
782 |
|
783 | - Respect `basename` in `useFormAction` ([#9352](https://github.com/remix-run/react-router/pull/9352))
|
784 | - Enhance console error messages for invalid usage of data router hooks ([#9311](https://github.com/remix-run/react-router/pull/9311))
|
785 | - If an index route has children, it will result in a runtime error. We have strengthened our `RouteObject`/`RouteProps` types to surface the error in TypeScript. ([#9366](https://github.com/remix-run/react-router/pull/9366))
|
786 | - Updated dependencies:
|
787 | - `react-router@6.4.2`
|
788 | - `@remix-run/router@1.0.2`
|
789 |
|
790 | ## 6.4.1
|
791 |
|
792 | ### Patch Changes
|
793 |
|
794 | - Updated dependencies:
|
795 | - `react-router@6.4.1`
|
796 | - `@remix-run/router@1.0.1`
|
797 |
|
798 | ## 6.4.0
|
799 |
|
800 | Whoa this is a big one! `6.4.0` brings all the data loading and mutation APIs over from Remix. Here's a quick high level overview, but it's recommended you go check out the [docs](https://reactrouter.com), especially the [feature overview](https://reactrouter.com/start/overview) and the [tutorial](https://reactrouter.com/start/tutorial).
|
801 |
|
802 | **New APIs**
|
803 |
|
804 | - Create your router with `createMemoryRouter`/`createBrowserRouter`/`createHashRouter`
|
805 | - Render your router with `<RouterProvider>`
|
806 | - Load data with a Route `loader` and mutate with a Route `action`
|
807 | - Handle errors with Route `errorElement`
|
808 | - Submit data with the new `<Form>` component
|
809 | - Perform in-page data loads and mutations with `useFetcher()`
|
810 | - Defer non-critical data with `defer` and `Await`
|
811 | - Manage scroll position with `<ScrollRestoration>`
|
812 |
|
813 | **New Features**
|
814 |
|
815 | - Perform path-relative navigations with `<Link relative="path">` (#9160)
|
816 |
|
817 | **Bug Fixes**
|
818 |
|
819 | - Path resolution is now trailing slash agnostic (#8861)
|
820 | - `useLocation` returns the scoped location inside a `<Routes location>` component (#9094)
|
821 | - respect the `<Link replace>` prop if it is defined (#8779)
|
822 |
|
823 | **Updated Dependencies**
|
824 |
|
825 | - `react-router@6.4.0`
|
826 |
|
\ | No newline at end of file |