UNPKG

84.8 kBMarkdownView Raw
1# `react-router`
2
3## 7.7.1
4
5### Patch Changes
6
7- In RSC Data Mode, fix bug where routes with errors weren't forced to revalidate when `shouldRevalidate` returned false ([#14026](https://github.com/remix-run/react-router/pull/14026))
8- In RSC Data Mode, fix `Matched leaf route at location "/..." does not have an element or Component` warnings when error boundaries are rendered. ([#14021](https://github.com/remix-run/react-router/pull/14021))
9
10## 7.7.0
11
12### Minor Changes
13
14- Add unstable RSC support ([#13700](https://github.com/remix-run/react-router/pull/13700))
15
16 For more information, see the [RSC documentation](https://reactrouter.com/start/rsc/installation).
17
18### Patch Changes
19
20- Handle `InvalidCharacterError` when validating cookie signature ([#13847](https://github.com/remix-run/react-router/pull/13847))
21
22- Pass a copy of `searchParams` to the `setSearchParams` callback function to avoid muations of the internal `searchParams` instance. This was an issue when navigations were blocked because the internal instance be out of sync with `useLocation().search`. ([#12784](https://github.com/remix-run/react-router/pull/12784))
23
24- Support invalid `Date` in `turbo-stream` v2 fork ([#13684](https://github.com/remix-run/react-router/pull/13684))
25
26- In Framework Mode, clear critical CSS in development after initial render ([#13872](https://github.com/remix-run/react-router/pull/13872))
27
28- Strip search parameters from `patchRoutesOnNavigation` `path` param for fetcher calls ([#13911](https://github.com/remix-run/react-router/pull/13911))
29
30- Skip scroll restoration on useRevalidator() calls because they're not new locations ([#13671](https://github.com/remix-run/react-router/pull/13671))
31
32- Support unencoded UTF-8 routes in prerender config with `ssr` set to `false` ([#13699](https://github.com/remix-run/react-router/pull/13699))
33
34- Do not throw if the url hash is not a valid URI component ([#13247](https://github.com/remix-run/react-router/pull/13247))
35
36- Fix a regression in `createRoutesStub` introduced with the middleware feature. ([#13946](https://github.com/remix-run/react-router/pull/13946))
37
38 As part of that work we altered the signature to align with the new middleware APIs without making it backwards compatible with the prior `AppLoadContext` API. This permitted `createRoutesStub` to work if you were opting into middleware and the updated `context` typings, but broke `createRoutesStub` for users not yet opting into middleware.
39
40 We've reverted this change and re-implemented it in such a way that both sets of users can leverage it.
41
42 ```tsx
43 // If you have not opted into middleware, the old API should work again
44 let context: AppLoadContext = {
45 /*...*/
46 };
47 let Stub = createRoutesStub(routes, context);
48
49 // If you have opted into middleware, you should now pass an instantiated `unstable_routerContextProvider` instead of a `getContext` factory function.
50 let context = new unstable_RouterContextProvider();
51 context.set(SomeContext, someValue);
52 let Stub = createRoutesStub(routes, context);
53 ```
54
55 ⚠️ This may be a breaking bug for if you have adopted the unstable Middleware feature and are using `createRoutesStub` with the updated API.
56
57- Remove `Content-Length` header from Single Fetch responses ([#13902](https://github.com/remix-run/react-router/pull/13902))
58
59## 7.6.3
60
61### Patch Changes
62
63- Do not serialize types for `useRouteLoaderData<typeof clientLoader>` ([#13752](https://github.com/remix-run/react-router/pull/13752))
64
65 For types to distinguish a `clientLoader` from a `serverLoader`, you MUST annotate `clientLoader` args:
66
67 ```ts
68 // 👇 annotation required to skip serializing types
69 export function clientLoader({}: Route.ClientLoaderArgs) {
70 return { fn: () => "earth" };
71 }
72
73 function SomeComponent() {
74 const data = useRouteLoaderData<typeof clientLoader>("routes/this-route");
75 const planet = data?.fn() ?? "world";
76 return <h1>Hello, {planet}!</h1>;
77 }
78 ```
79
80## 7.6.2
81
82### Patch Changes
83
84- Avoid additional `with-props` chunk in Framework Mode by moving route module component prop logic from the Vite plugin to `react-router` ([#13650](https://github.com/remix-run/react-router/pull/13650))
85- Slight refactor of internal `headers()` function processing for use with RSC ([#13639](https://github.com/remix-run/react-router/pull/13639))
86
87## 7.6.1
88
89### Patch Changes
90
91- Update `Route.MetaArgs` to reflect that `data` can be potentially `undefined` ([#13563](https://github.com/remix-run/react-router/pull/13563))
92
93 This is primarily for cases where a route `loader` threw an error to it's own `ErrorBoundary`. but it also arises in the case of a 404 which renders the root `ErrorBoundary`/`meta` but the root loader did not run because not routes matched.
94
95- Partially revert optimization added in `7.1.4` to reduce calls to `matchRoutes` because it surfaced other issues ([#13562](https://github.com/remix-run/react-router/pull/13562))
96
97- Fix typegen when same route is used at multiple paths ([#13574](https://github.com/remix-run/react-router/pull/13574))
98
99 For example, `routes/route.tsx` is used at 4 different paths here:
100
101 ```ts
102 import { type RouteConfig, route } from "@react-router/dev/routes";
103 export default [
104 route("base/:base", "routes/base.tsx", [
105 route("home/:home", "routes/route.tsx", { id: "home" }),
106 route("changelog/:changelog", "routes/route.tsx", { id: "changelog" }),
107 route("splat/*", "routes/route.tsx", { id: "splat" }),
108 ]),
109 route("other/:other", "routes/route.tsx", { id: "other" }),
110 ] satisfies RouteConfig;
111 ```
112
113 Previously, typegen would arbitrarily pick one of these paths to be the "winner" and generate types for the route module based on that path.
114 Now, typegen creates unions as necessary for alternate paths for the same route file.
115
116- Better types for `params` ([#13543](https://github.com/remix-run/react-router/pull/13543))
117
118 For example:
119
120 ```ts
121 // routes.ts
122 import { type RouteConfig, route } from "@react-router/dev/routes";
123
124 export default [
125 route("parent/:p", "routes/parent.tsx", [
126 route("layout/:l", "routes/layout.tsx", [
127 route("child1/:c1a/:c1b", "routes/child1.tsx"),
128 route("child2/:c2a/:c2b", "routes/child2.tsx"),
129 ]),
130 ]),
131 ] satisfies RouteConfig;
132 ```
133
134 Previously, `params` for the `routes/layout.tsx` route were calculated as `{ p: string, l: string }`.
135 This incorrectly ignores params that could come from child routes.
136 If visiting `/parent/1/layout/2/child1/3/4`, the actual params passed to `routes/layout.tsx` will have a type of `{ p: string, l: string, c1a: string, c1b: string }`.
137
138 Now, `params` are aware of child routes and autocompletion will include child params as optionals:
139
140 ```ts
141 params.|
142 // ^ cursor is here and you ask for autocompletion
143 // p: string
144 // l: string
145 // c1a?: string
146 // c1b?: string
147 // c2a?: string
148 // c2b?: string
149 ```
150
151 You can also narrow the types for `params` as it is implemented as a normalized union of params for each page that includes `routes/layout.tsx`:
152
153 ```ts
154 if (typeof params.c1a === 'string') {
155 params.|
156 // ^ cursor is here and you ask for autocompletion
157 // p: string
158 // l: string
159 // c1a: string
160 // c1b: string
161 }
162 ```
163
164 ***
165
166 UNSTABLE: renamed internal `react-router/route-module` export to `react-router/internal`
167 UNSTABLE: removed `Info` export from generated `+types/*` files
168
169- Avoid initial fetcher execution 404 error when Lazy Route Discovery is interrupted by a navigation ([#13564](https://github.com/remix-run/react-router/pull/13564))
170
171- href replaces splats `*` ([#13593](https://github.com/remix-run/react-router/pull/13593))
172
173 ```ts
174 const a = href("/products/*", { "*": "/1/edit" });
175 // -> /products/1/edit
176 ```
177
178## 7.6.0
179
180### Minor Changes
181
182- Added a new `react-router.config.ts` `routeDiscovery` option to configure Lazy Route Discovery behavior. ([#13451](https://github.com/remix-run/react-router/pull/13451))
183 - By default, Lazy Route Discovery is enabled and makes manifest requests to the `/__manifest` path:
184 - `routeDiscovery: { mode: "lazy", manifestPath: "/__manifest" }`
185 - You can modify the manifest path used:
186 - `routeDiscovery: { mode: "lazy", manifestPath: "/custom-manifest" }`
187 - Or you can disable this feature entirely and include all routes in the manifest on initial document load:
188 - `routeDiscovery: { mode: "initial" }`
189
190- Add support for route component props in `createRoutesStub`. This allows you to unit test your route components using the props instead of the hooks: ([#13528](https://github.com/remix-run/react-router/pull/13528))
191
192 ```tsx
193 let RoutesStub = createRoutesStub([
194 {
195 path: "/",
196 Component({ loaderData }) {
197 let data = loaderData as { message: string };
198 return <pre data-testid="data">Message: {data.message}</pre>;
199 },
200 loader() {
201 return { message: "hello" };
202 },
203 },
204 ]);
205
206 render(<RoutesStub />);
207
208 await waitFor(() => screen.findByText("Message: hello"));
209 ```
210
211### Patch Changes
212
213- Fix `react-router` module augmentation for `NodeNext` ([#13498](https://github.com/remix-run/react-router/pull/13498))
214
215- Don't bundle `react-router` in `react-router/dom` CJS export ([#13497](https://github.com/remix-run/react-router/pull/13497))
216
217- Fix bug where a submitting `fetcher` would get stuck in a `loading` state if a revalidating `loader` redirected ([#12873](https://github.com/remix-run/react-router/pull/12873))
218
219- Fix hydration error if a server `loader` returned `undefined` ([#13496](https://github.com/remix-run/react-router/pull/13496))
220
221- Fix initial load 404 scenarios in data mode ([#13500](https://github.com/remix-run/react-router/pull/13500))
222
223- Stabilize `useRevalidator`'s `revalidate` function ([#13542](https://github.com/remix-run/react-router/pull/13542))
224
225- Preserve status code if a `clientAction` throws a `data()` result in framework mode ([#13522](https://github.com/remix-run/react-router/pull/13522))
226
227- Be defensive against leading double slashes in paths to avoid `Invalid URL` errors from the URL constructor ([#13510](https://github.com/remix-run/react-router/pull/13510))
228 - Note we do not sanitize/normalize these paths - we only detect them so we can avoid the error that would be thrown by `new URL("//", window.location.origin)`
229
230- Remove `Navigator` declaration for `navigator.connection.saveData` to avoid messing with any other types beyond `saveData` in userland ([#13512](https://github.com/remix-run/react-router/pull/13512))
231
232- Fix `handleError` `params` values on `.data` requests for routes with a dynamic param as the last URL segment ([#13481](https://github.com/remix-run/react-router/pull/13481))
233
234- Don't trigger an `ErrorBoundary` UI before the reload when we detect a manifest verison mismatch in Lazy Route Discovery ([#13480](https://github.com/remix-run/react-router/pull/13480))
235
236- Inline `turbo-stream@2.4.1` dependency and fix decoding ordering of Map/Set instances ([#13518](https://github.com/remix-run/react-router/pull/13518))
237
238- Only render dev warnings in DEV mode ([#13461](https://github.com/remix-run/react-router/pull/13461))
239
240- UNSTABLE: Fix a few bugs with error bubbling in middleware use-cases ([#13538](https://github.com/remix-run/react-router/pull/13538))
241
242- Short circuit post-processing on aborted `dataStrategy` requests ([#13521](https://github.com/remix-run/react-router/pull/13521))
243 - This resolves non-user-facing console errors of the form `Cannot read properties of undefined (reading 'result')`
244
245## 7.5.3
246
247### Patch Changes
248
249- Fix bug where bubbled action errors would result in `loaderData` being cleared at the handling `ErrorBoundary` route ([#13476](https://github.com/remix-run/react-router/pull/13476))
250- Handle redirects from `clientLoader.hydrate` initial load executions ([#13477](https://github.com/remix-run/react-router/pull/13477))
251
252## 7.5.2
253
254### Patch Changes
255
256- Update Single Fetch to also handle the 204 redirects used in `?_data` requests in Remix v2 ([#13364](https://github.com/remix-run/react-router/pull/13364))
257 - This allows applications to return a redirect on `.data` requests from outside the scope of React Router (i.e., an `express`/`hono` middleware)
258 - ⚠️ Please note that doing so relies on implementation details that are subject to change without a SemVer major release
259 - This is primarily done to ease upgrading to Single Fetch for existing Remix v2 applications, but the recommended way to handle this is redirecting from a route middleware
260
261- Adjust approach for Prerendering/SPA Mode via headers ([#13453](https://github.com/remix-run/react-router/pull/13453))
262
263## 7.5.1
264
265### Patch Changes
266
267- Fix single fetch bug where no revalidation request would be made when navigating upwards to a reused parent route ([#13253](https://github.com/remix-run/react-router/pull/13253))
268
269- When using the object-based `route.lazy` API, the `HydrateFallback` and `hydrateFallbackElement` properties are now skipped when lazy loading routes after hydration. ([#13376](https://github.com/remix-run/react-router/pull/13376))
270
271 If you move the code for these properties into a separate file, you can use this optimization to avoid downloading unused hydration code. For example:
272
273 ```ts
274 createBrowserRouter([
275 {
276 path: "/show/:showId",
277 lazy: {
278 loader: async () => (await import("./show.loader.js")).loader,
279 Component: async () => (await import("./show.component.js")).Component,
280 HydrateFallback: async () =>
281 (await import("./show.hydrate-fallback.js")).HydrateFallback,
282 },
283 },
284 ]);
285 ```
286
287- Properly revalidate prerendered paths when param values change ([#13380](https://github.com/remix-run/react-router/pull/13380))
288
289- UNSTABLE: Add a new `unstable_runClientMiddleware` argument to `dataStrategy` to enable middleware execution in custom `dataStrategy` implementations ([#13395](https://github.com/remix-run/react-router/pull/13395))
290
291- UNSTABLE: Add better error messaging when `getLoadContext` is not updated to return a `Map`" ([#13242](https://github.com/remix-run/react-router/pull/13242))
292
293- Do not automatically add `null` to `staticHandler.query()` `context.loaderData` if routes do not have loaders ([#13223](https://github.com/remix-run/react-router/pull/13223))
294 - This was a Remix v2 implementation detail inadvertently left in for React Router v7
295 - Now that we allow returning `undefined` from loaders, our prior check of `loaderData[routeId] !== undefined` was no longer sufficient and was changed to a `routeId in loaderData` check - these `null` values can cause issues for this new check
296 - ⚠️ This could be a "breaking bug fix" for you if you are doing manual SSR with `createStaticHandler()`/`<StaticRouterProvider>`, and using `context.loaderData` to control `<RouterProvider>` hydration behavior on the client
297
298- Fix prerendering when a loader returns a redirect ([#13365](https://github.com/remix-run/react-router/pull/13365))
299
300- UNSTABLE: Update context type for `LoaderFunctionArgs`/`ActionFunctionArgs` when middleware is enabled ([#13381](https://github.com/remix-run/react-router/pull/13381))
301
302- Add support for the new `unstable_shouldCallHandler`/`unstable_shouldRevalidateArgs` APIs in `dataStrategy` ([#13253](https://github.com/remix-run/react-router/pull/13253))
303
304## 7.5.0
305
306### Minor Changes
307
308- Add granular object-based API for `route.lazy` to support lazy loading of individual route properties, for example: ([#13294](https://github.com/remix-run/react-router/pull/13294))
309
310 ```ts
311 createBrowserRouter([
312 {
313 path: "/show/:showId",
314 lazy: {
315 loader: async () => (await import("./show.loader.js")).loader,
316 action: async () => (await import("./show.action.js")).action,
317 Component: async () => (await import("./show.component.js")).Component,
318 },
319 },
320 ]);
321 ```
322
323 **Breaking change for `route.unstable_lazyMiddleware` consumers**
324
325 The `route.unstable_lazyMiddleware` property is no longer supported. If you want to lazily load middleware, you must use the new object-based `route.lazy` API with `route.lazy.unstable_middleware`, for example:
326
327 ```ts
328 createBrowserRouter([
329 {
330 path: "/show/:showId",
331 lazy: {
332 unstable_middleware: async () =>
333 (await import("./show.middleware.js")).middleware,
334 // etc.
335 },
336 },
337 ]);
338 ```
339
340### Patch Changes
341
342- Introduce `unstable_subResourceIntegrity` future flag that enables generation of an importmap with integrity for the scripts that will be loaded by the browser. ([#13163](https://github.com/remix-run/react-router/pull/13163))
343
344## 7.4.1
345
346### Patch Changes
347
348- Fix types on `unstable_MiddlewareFunction` to avoid type errors when a middleware doesn't return a value ([#13311](https://github.com/remix-run/react-router/pull/13311))
349- Dedupe calls to `route.lazy` functions ([#13260](https://github.com/remix-run/react-router/pull/13260))
350- Add support for `route.unstable_lazyMiddleware` function to allow lazy loading of middleware logic. ([#13210](https://github.com/remix-run/react-router/pull/13210))
351
352 **Breaking change for `unstable_middleware` consumers**
353
354 The `route.unstable_middleware` property is no longer supported in the return value from `route.lazy`. If you want to lazily load middleware, you must use `route.unstable_lazyMiddleware`.
355
356## 7.4.0
357
358### Patch Changes
359
360- Fix root loader data on initial load redirects in SPA mode ([#13222](https://github.com/remix-run/react-router/pull/13222))
361- Load ancestor pathless/index routes in lazy route discovery for upwards non-eager-discoery routing ([#13203](https://github.com/remix-run/react-router/pull/13203))
362- Fix `shouldRevalidate` behavior for `clientLoader`-only routes in `ssr:true` apps ([#13221](https://github.com/remix-run/react-router/pull/13221))
363- UNSTABLE: Fix `RequestHandler` `loadContext` parameter type when middleware is enabled ([#13204](https://github.com/remix-run/react-router/pull/13204))
364- UNSTABLE: Update `Route.unstable_MiddlewareFunction` to have a return value of `Response | undefined` instead of `Response | void` becaue you should not return anything if you aren't returning the `Response` ([#13199](https://github.com/remix-run/react-router/pull/13199))
365- UNSTABLE(BREAKING): If a middleware throws an error, ensure we only bubble the error itself via `next()` and are no longer leaking the `MiddlewareError` implementation detail ([#13180](https://github.com/remix-run/react-router/pull/13180))
366
367## 7.3.0
368
369### Minor Changes
370
371- Add `fetcherKey` as a parameter to `patchRoutesOnNavigation` ([#13061](https://github.com/remix-run/react-router/pull/13061))
372 - In framework mode, Lazy Route Discovery will now detect manifest version mismatches after a new deploy
373 - On navigations to undiscovered routes, this mismatch will trigger a document reload of the destination path
374 - On `fetcher` calls to undiscovered routes, this mismatch will trigger a document reload of the current path
375
376### Patch Changes
377
378- Skip resource route flow in dev server in SPA mode ([#13113](https://github.com/remix-run/react-router/pull/13113))
379
380- Support middleware on routes (unstable) ([#12941](https://github.com/remix-run/react-router/pull/12941))
381
382 Middleware is implemented behind a `future.unstable_middleware` flag. To enable, you must enable the flag and the types in your `react-router-config.ts` file:
383
384 ```ts
385 import type { Config } from "@react-router/dev/config";
386 import type { Future } from "react-router";
387
388 declare module "react-router" {
389 interface Future {
390 unstable_middleware: true; // 👈 Enable middleware types
391 }
392 }
393
394 export default {
395 future: {
396 unstable_middleware: true, // 👈 Enable middleware
397 },
398 } satisfies Config;
399 ```
400
401 ⚠️ Middleware is unstable and should not be adopted in production. There is at least one known de-optimization in route module loading for `clientMiddleware` that we will be addressing this before a stable release.
402
403 ⚠️ Enabling middleware contains a breaking change to the `context` parameter passed to your `loader`/`action` functions - see below for more information.
404
405 Once enabled, routes can define an array of middleware functions that will run sequentially before route handlers run. These functions accept the same parameters as `loader`/`action` plus an additional `next` parameter to run the remaining data pipeline. This allows middlewares to perform logic before and after handlers execute.
406
407 ```tsx
408 // Framework mode
409 export const unstable_middleware = [serverLogger, serverAuth]; // server
410 export const unstable_clientMiddleware = [clientLogger]; // client
411
412 // Library mode
413 const routes = [
414 {
415 path: "/",
416 // Middlewares are client-side for library mode SPA's
417 unstable_middleware: [clientLogger, clientAuth],
418 loader: rootLoader,
419 Component: Root,
420 },
421 ];
422 ```
423
424 Here's a simple example of a client-side logging middleware that can be placed on the root route:
425
426 ```tsx
427 const clientLogger: Route.unstable_ClientMiddlewareFunction = async (
428 { request },
429 next,
430 ) => {
431 let start = performance.now();
432
433 // Run the remaining middlewares and all route loaders
434 await next();
435
436 let duration = performance.now() - start;
437 console.log(`Navigated to ${request.url} (${duration}ms)`);
438 };
439 ```
440
441 Note that in the above example, the `next`/`middleware` functions don't return anything. This is by design as on the client there is no "response" to send over the network like there would be for middlewares running on the server. The data is all handled behind the scenes by the stateful `router`.
442
443 For a server-side middleware, the `next` function will return the HTTP `Response` that React Router will be sending across the wire, thus giving you a chance to make changes as needed. You may throw a new response to short circuit and respond immediately, or you may return a new or altered response to override the default returned by `next()`.
444
445 ```tsx
446 const serverLogger: Route.unstable_MiddlewareFunction = async (
447 { request, params, context },
448 next,
449 ) => {
450 let start = performance.now();
451
452 // 👇 Grab the response here
453 let res = await next();
454
455 let duration = performance.now() - start;
456 console.log(`Navigated to ${request.url} (${duration}ms)`);
457
458 // 👇 And return it here (optional if you don't modify the response)
459 return res;
460 };
461 ```
462
463 You can throw a `redirect` from a middleware to short circuit any remaining processing:
464
465 ```tsx
466 import { sessionContext } from "../context";
467 const serverAuth: Route.unstable_MiddlewareFunction = (
468 { request, params, context },
469 next,
470 ) => {
471 let session = context.get(sessionContext);
472 let user = session.get("user");
473 if (!user) {
474 session.set("returnTo", request.url);
475 throw redirect("/login", 302);
476 }
477 };
478 ```
479
480 _Note that in cases like this where you don't need to do any post-processing you don't need to call the `next` function or return a `Response`._
481
482 Here's another example of using a server middleware to detect 404s and check the CMS for a redirect:
483
484 ```tsx
485 const redirects: Route.unstable_MiddlewareFunction = async ({
486 request,
487 next,
488 }) => {
489 // attempt to handle the request
490 let res = await next();
491
492 // if it's a 404, check the CMS for a redirect, do it last
493 // because it's expensive
494 if (res.status === 404) {
495 let cmsRedirect = await checkCMSRedirects(request.url);
496 if (cmsRedirect) {
497 throw redirect(cmsRedirect, 302);
498 }
499 }
500
501 return res;
502 };
503 ```
504
505 **`context` parameter**
506
507 When middleware is enabled, your application will use a different type of `context` parameter in your loaders and actions to provide better type safety. Instead of `AppLoadContext`, `context` will now be an instance of `ContextProvider` that you can use with type-safe contexts (similar to `React.createContext`):
508
509 ```ts
510 import { unstable_createContext } from "react-router";
511 import { Route } from "./+types/root";
512 import type { Session } from "./sessions.server";
513 import { getSession } from "./sessions.server";
514
515 let sessionContext = unstable_createContext<Session>();
516
517 const sessionMiddleware: Route.unstable_MiddlewareFunction = ({
518 context,
519 request,
520 }) => {
521 let session = await getSession(request);
522 context.set(sessionContext, session);
523 // ^ must be of type Session
524 };
525
526 // ... then in some downstream middleware
527 const loggerMiddleware: Route.unstable_MiddlewareFunction = ({
528 context,
529 request,
530 }) => {
531 let session = context.get(sessionContext);
532 // ^ typeof Session
533 console.log(session.get("userId"), request.method, request.url);
534 };
535
536 // ... or some downstream loader
537 export function loader({ context }: Route.LoaderArgs) {
538 let session = context.get(sessionContext);
539 let profile = await getProfile(session.get("userId"));
540 return { profile };
541 }
542 ```
543
544 If you are using a custom server with a `getLoadContext` function, the return value for initial context values passed from the server adapter layer is no longer an object and should now return an `unstable_InitialContext` (`Map<RouterContext, unknown>`):
545
546 ```ts
547 let adapterContext = unstable_createContext<MyAdapterContext>();
548
549 function getLoadContext(req, res): unstable_InitialContext {
550 let map = new Map();
551 map.set(adapterContext, getAdapterContext(req));
552 return map;
553 }
554 ```
555
556- Fix types for loaderData and actionData that contained `Record`s ([#13139](https://github.com/remix-run/react-router/pull/13139))
557
558 UNSTABLE(BREAKING):
559
560 `unstable_SerializesTo` added a way to register custom serialization types in Single Fetch for other library and framework authors like Apollo.
561 It was implemented with branded type whose branded property that was made optional so that casting arbitrary values was easy:
562
563 ```ts
564 // without the brand being marked as optional
565 let x1 = 42 as unknown as unstable_SerializesTo<number>;
566 // ^^^^^^^^^^
567
568 // with the brand being marked as optional
569 let x2 = 42 as unstable_SerializesTo<number>;
570 ```
571
572 However, this broke type inference in `loaderData` and `actionData` for any `Record` types as those would now (incorrectly) match `unstable_SerializesTo`.
573 This affected all users, not just those that depended on `unstable_SerializesTo`.
574 To fix this, the branded property of `unstable_SerializesTo` is marked as required instead of optional.
575
576 For library and framework authors using `unstable_SerializesTo`, you may need to add `as unknown` casts before casting to `unstable_SerializesTo`.
577
578- Fix single fetch `_root.data` requests when a `basename` is used ([#12898](https://github.com/remix-run/react-router/pull/12898))
579
580- Add `context` support to client side data routers (unstable) ([#12941](https://github.com/remix-run/react-router/pull/12941))
581
582 Your application `loader` and `action` functions on the client will now receive a `context` parameter. This is an instance of `unstable_RouterContextProvider` that you use with type-safe contexts (similar to `React.createContext`) and is most useful with the corresponding `middleware`/`clientMiddleware` API's:
583
584 ```ts
585 import { unstable_createContext } from "react-router";
586
587 type User = {
588 /*...*/
589 };
590
591 let userContext = unstable_createContext<User>();
592
593 function sessionMiddleware({ context }) {
594 let user = await getUser();
595 context.set(userContext, user);
596 }
597
598 // ... then in some downstream loader
599 function loader({ context }) {
600 let user = context.get(userContext);
601 let profile = await getProfile(user.id);
602 return { profile };
603 }
604 ```
605
606 Similar to server-side requests, a fresh `context` will be created per navigation (or `fetcher` call). If you have initial data you'd like to populate in the context for every request, you can provide an `unstable_getContext` function at the root of your app:
607
608 - Library mode - `createBrowserRouter(routes, { unstable_getContext })`
609 - Framework mode - `<HydratedRouter unstable_getContext>`
610
611 This function should return an value of type `unstable_InitialContext` which is a `Map<unstable_RouterContext, unknown>` of context's and initial values:
612
613 ```ts
614 const loggerContext = unstable_createContext<(...args: unknown[]) => void>();
615
616 function logger(...args: unknown[]) {
617 console.log(new Date.toISOString(), ...args);
618 }
619
620 function unstable_getContext() {
621 let map = new Map();
622 map.set(loggerContext, logger);
623 return map;
624 }
625 ```
626
627## 7.2.0
628
629### Minor Changes
630
631- New type-safe `href` utility that guarantees links point to actual paths in your app ([#13012](https://github.com/remix-run/react-router/pull/13012))
632
633 ```tsx
634 import { href } from "react-router";
635
636 export default function Component() {
637 const link = href("/blog/:slug", { slug: "my-first-post" });
638 return (
639 <main>
640 <Link to={href("/products/:id", { id: "asdf" })} />
641 <NavLink to={href("/:lang?/about", { lang: "en" })} />
642 </main>
643 );
644 }
645 ```
646
647### Patch Changes
648
649- Fix typegen for repeated params ([#13012](https://github.com/remix-run/react-router/pull/13012))
650
651 In React Router, path parameters are keyed by their name.
652 So for a path pattern like `/a/:id/b/:id?/c/:id`, the last `:id` will set the value for `id` in `useParams` and the `params` prop.
653 For example, `/a/1/b/2/c/3` will result in the value `{ id: 3 }` at runtime.
654
655 Previously, generated types for params incorrectly modeled repeated params with an array.
656 So `/a/1/b/2/c/3` generated a type like `{ id: [1,2,3] }`.
657
658 To be consistent with runtime behavior, the generated types now correctly model the "last one wins" semantics of path parameters.
659 So `/a/1/b/2/c/3` now generates a type like `{ id: 3 }`.
660
661- Don't apply Single Fetch revalidation de-optimization when in SPA mode since there is no server HTTP request ([#12948](https://github.com/remix-run/react-router/pull/12948))
662
663- Properly handle revalidations to across a prerender/SPA boundary ([#13021](https://github.com/remix-run/react-router/pull/13021))
664 - In "hybrid" applications where some routes are pre-rendered and some are served from a SPA fallback, we need to avoid making `.data` requests if the path wasn't pre-rendered because the request will 404
665 - We don't know all the pre-rendered paths client-side, however:
666 - All `loader` data in `ssr:false` mode is static because it's generated at build time
667 - A route must use a `clientLoader` to do anything dynamic
668 - Therefore, if a route only has a `loader` and not a `clientLoader`, we disable revalidation by default because there is no new data to retrieve
669 - We short circuit and skip single fetch `.data` request logic if there are no server loaders with `shouldLoad=true` in our single fetch `dataStrategy`
670 - This ensures that the route doesn't cause a `.data` request that would 404 after a submission
671
672- Error at build time in `ssr:false` + `prerender` apps for the edge case scenario of: ([#13021](https://github.com/remix-run/react-router/pull/13021))
673 - A parent route has only a `loader` (does not have a `clientLoader`)
674 - The parent route is pre-rendered
675 - The parent route has children routes which are not prerendered
676 - This means that when the child paths are loaded via the SPA fallback, the parent won't have any `loaderData` because there is no server on which to run the `loader`
677 - This can be resolved by either adding a parent `clientLoader` or pre-rendering the child paths
678 - If you add a `clientLoader`, calling the `serverLoader()` on non-prerendered paths will throw a 404
679
680- Add unstable support for splitting route modules in framework mode via `future.unstable_splitRouteModules` ([#11871](https://github.com/remix-run/react-router/pull/11871))
681
682- Add `unstable_SerializesTo` brand type for library authors to register types serializable by React Router's streaming format (`turbo-stream`) ([`ab5b05b02`](https://github.com/remix-run/react-router/commit/ab5b05b02f99f062edb3c536c392197c88eb6c77))
683
684- Align dev server behavior with static file server behavior when `ssr:false` is set ([#12948](https://github.com/remix-run/react-router/pull/12948))
685 - When no `prerender` config exists, only SSR down to the root `HydrateFallback` (SPA Mode)
686 - When a `prerender` config exists but the current path is not prerendered, only SSR down to the root `HydrateFallback` (SPA Fallback)
687 - Return a 404 on `.data` requests to non-pre-rendered paths
688
689- Improve prefetch performance of CSS side effects in framework mode ([#12889](https://github.com/remix-run/react-router/pull/12889))
690
691- Disable Lazy Route Discovery for all `ssr:false` apps and not just "SPA Mode" because there is no runtime server to serve the search-param-configured `__manifest` requests ([#12894](https://github.com/remix-run/react-router/pull/12894))
692 - We previously only disabled this for "SPA Mode" which is `ssr:false` and no `prerender` config but we realized it should apply to all `ssr:false` apps, including those prerendering multiple pages
693 - In those `prerender` scenarios we would prerender the `/__manifest` file assuming the static file server would serve it but that makes some unneccesary assumptions about the static file server behaviors
694
695- Properly handle interrupted manifest requests in lazy route discovery ([#12915](https://github.com/remix-run/react-router/pull/12915))
696
697## 7.1.5
698
699### Patch Changes
700
701- Fix regression introduced in `7.1.4` via [#12800](https://github.com/remix-run/react-router/pull/12800) that caused issues navigating to hash routes inside splat routes for applications using Lazy Route Discovery (`patchRoutesOnNavigation`) ([#12927](https://github.com/remix-run/react-router/pull/12927))
702
703## 7.1.4
704
705### Patch Changes
706
707- Internal reorg to clean up some duplicated route module types ([#12799](https://github.com/remix-run/react-router/pull/12799))
708- Properly handle status codes that cannot have a body in single fetch responses (204, etc.) ([#12760](https://github.com/remix-run/react-router/pull/12760))
709- Stop erroring on resource routes that return raw strings/objects and instead serialize them as `text/plain` or `application/json` responses ([#12848](https://github.com/remix-run/react-router/pull/12848))
710 - This only applies when accessed as a resource route without the `.data` extension
711 - When accessed from a Single Fetch `.data` request, they will still be encoded via `turbo-stream`
712- Optimize Lazy Route Discovery path discovery to favor a single `querySelectorAll` call at the `body` level instead of many calls at the sub-tree level ([#12731](https://github.com/remix-run/react-router/pull/12731))
713- Properly bubble headers as `errorHeaders` when throwing a `data()` result ([#12846](https://github.com/remix-run/react-router/pull/12846))
714 - Avoid duplication of `Set-Cookie` headers could be duplicated if also returned from `headers`
715- Optimize route matching by skipping redundant `matchRoutes` calls when possible ([#12800](https://github.com/remix-run/react-router/pull/12800))
716
717## 7.1.3
718
719_No changes_
720
721## 7.1.2
722
723### Patch Changes
724
725- Fix issue with fetcher data cleanup in the data layer on fetcher unmount ([#12681](https://github.com/remix-run/react-router/pull/12681))
726- Do not rely on `symbol` for filtering out `redirect` responses from loader data ([#12694](https://github.com/remix-run/react-router/pull/12694))
727
728 Previously, some projects were getting type checking errors like:
729
730 ```ts
731 error TS4058: Return type of exported function has or is using name 'redirectSymbol' from external module "node_modules/..." but cannot be named.
732 ```
733
734 Now that `symbol`s are not used for the `redirect` response type, these errors should no longer be present.
735
736## 7.1.1
737
738_No changes_
739
740## 7.1.0
741
742### Patch Changes
743
744- Throw unwrapped single fetch redirect to align with pre-single fetch behavior ([#12506](https://github.com/remix-run/react-router/pull/12506))
745- Ignore redirects when inferring loader data types ([#12527](https://github.com/remix-run/react-router/pull/12527))
746- Remove `<Link prefetch>` warning which suffers from false positives in a lazy route discovery world ([#12485](https://github.com/remix-run/react-router/pull/12485))
747
748## 7.0.2
749
750### Patch Changes
751
752- temporarily only use one build in export map so packages can have a peer dependency on react router ([#12437](https://github.com/remix-run/react-router/pull/12437))
753- Generate wide `matches` and `params` types for current route and child routes ([#12397](https://github.com/remix-run/react-router/pull/12397))
754
755 At runtime, `matches` includes child route matches and `params` include child route path parameters.
756 But previously, we only generated types for parent routes in `matches`; for `params`, we only considered the parent routes and the current route.
757 To align our generated types more closely to the runtime behavior, we now generate more permissive, wider types when accessing child route information.
758
759## 7.0.1
760
761_No changes_
762
763## 7.0.0
764
765### Major Changes
766
767- Remove the original `defer` implementation in favor of using raw promises via single fetch and `turbo-stream`. This removes these exports from React Router: ([#11744](https://github.com/remix-run/react-router/pull/11744))
768 - `defer`
769 - `AbortedDeferredError`
770 - `type TypedDeferredData`
771 - `UNSAFE_DeferredData`
772 - `UNSAFE_DEFERRED_SYMBOL`,
773
774- - Collapse `@remix-run/router` into `react-router` ([#11505](https://github.com/remix-run/react-router/pull/11505))
775 - Collapse `react-router-dom` into `react-router`
776 - Collapse `@remix-run/server-runtime` into `react-router`
777 - Collapse `@remix-run/testing` into `react-router`
778
779- Remove single fetch future flag. ([#11522](https://github.com/remix-run/react-router/pull/11522))
780
781- Drop support for Node 16, React Router SSR now requires Node 18 or higher ([#11391](https://github.com/remix-run/react-router/pull/11391))
782
783- Remove `future.v7_startTransition` flag ([#11696](https://github.com/remix-run/react-router/pull/11696))
784
785- - Expose the underlying router promises from the following APIs for compsition in React 19 APIs: ([#11521](https://github.com/remix-run/react-router/pull/11521))
786 - `useNavigate()`
787 - `useSubmit`
788 - `useFetcher().load`
789 - `useFetcher().submit`
790 - `useRevalidator.revalidate`
791
792- Remove `future.v7_normalizeFormMethod` future flag ([#11697](https://github.com/remix-run/react-router/pull/11697))
793
794- For Remix consumers migrating to React Router, the `crypto` global from the [Web Crypto API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Crypto_API) is now required when using cookie and session APIs. This means that the following APIs are provided from `react-router` rather than platform-specific packages: ([#11837](https://github.com/remix-run/react-router/pull/11837))
795
796 - `createCookie`
797 - `createCookieSessionStorage`
798 - `createMemorySessionStorage`
799 - `createSessionStorage`
800
801 For consumers running older versions of Node, the `installGlobals` function from `@remix-run/node` has been updated to define `globalThis.crypto`, using [Node's `require('node:crypto').webcrypto` implementation.](https://nodejs.org/api/webcrypto.html)
802
803 Since platform-specific packages no longer need to implement this API, the following low-level APIs have been removed:
804
805 - `createCookieFactory`
806 - `createSessionStorageFactory`
807 - `createCookieSessionStorageFactory`
808 - `createMemorySessionStorageFactory`
809
810- Imports/Exports cleanup ([#11840](https://github.com/remix-run/react-router/pull/11840))
811 - Removed the following exports that were previously public API from `@remix-run/router`
812 - types
813 - `AgnosticDataIndexRouteObject`
814 - `AgnosticDataNonIndexRouteObject`
815 - `AgnosticDataRouteMatch`
816 - `AgnosticDataRouteObject`
817 - `AgnosticIndexRouteObject`
818 - `AgnosticNonIndexRouteObject`
819 - `AgnosticRouteMatch`
820 - `AgnosticRouteObject`
821 - `TrackedPromise`
822 - `unstable_AgnosticPatchRoutesOnMissFunction`
823 - `Action` -> exported as `NavigationType` via `react-router`
824 - `Router` exported as `DataRouter` to differentiate from RR's `<Router>`
825 - API
826 - `getToPathname` (`@private`)
827 - `joinPaths` (`@private`)
828 - `normalizePathname` (`@private`)
829 - `resolveTo` (`@private`)
830 - `stripBasename` (`@private`)
831 - `createBrowserHistory` -> in favor of `createBrowserRouter`
832 - `createHashHistory` -> in favor of `createHashRouter`
833 - `createMemoryHistory` -> in favor of `createMemoryRouter`
834 - `createRouter`
835 - `createStaticHandler` -> in favor of wrapper `createStaticHandler` in RR Dom
836 - `getStaticContextFromError`
837 - Removed the following exports that were previously public API from `react-router`
838 - `Hash`
839 - `Pathname`
840 - `Search`
841
842- update minimum node version to 18 ([#11690](https://github.com/remix-run/react-router/pull/11690))
843
844- Remove `future.v7_prependBasename` from the ionternalized `@remix-run/router` package ([#11726](https://github.com/remix-run/react-router/pull/11726))
845
846- Migrate Remix type generics to React Router ([#12180](https://github.com/remix-run/react-router/pull/12180))
847 - These generics are provided for Remix v2 migration purposes
848 - These generics and the APIs they exist on should be considered informally deprecated in favor of the new `Route.*` types
849 - Anyone migrating from React Router v6 should probably not leverage these new generics and should migrate straight to the `Route.*` types
850 - For React Router v6 users, these generics are new and should not impact your app, with one exception
851 - `useFetcher` previously had an optional generic (used primarily by Remix v2) that expected the data type
852 - This has been updated in v7 to expect the type of the function that generates the data (i.e., `typeof loader`/`typeof action`)
853 - Therefore, you should update your usages:
854 - `useFetcher<LoaderData>()`
855 - `useFetcher<typeof loader>()`
856
857- Remove `future.v7_throwAbortReason` from internalized `@remix-run/router` package ([#11728](https://github.com/remix-run/react-router/pull/11728))
858
859- Add `exports` field to all packages ([#11675](https://github.com/remix-run/react-router/pull/11675))
860
861- node package no longer re-exports from react-router ([#11702](https://github.com/remix-run/react-router/pull/11702))
862
863- renamed RemixContext to FrameworkContext ([#11705](https://github.com/remix-run/react-router/pull/11705))
864
865- updates the minimum React version to 18 ([#11689](https://github.com/remix-run/react-router/pull/11689))
866
867- PrefetchPageDescriptor replaced by PageLinkDescriptor ([#11960](https://github.com/remix-run/react-router/pull/11960))
868
869- - Consolidate types previously duplicated across `@remix-run/router`, `@remix-run/server-runtime`, and `@remix-run/react` now that they all live in `react-router` ([#12177](https://github.com/remix-run/react-router/pull/12177))
870 - Examples: `LoaderFunction`, `LoaderFunctionArgs`, `ActionFunction`, `ActionFunctionArgs`, `DataFunctionArgs`, `RouteManifest`, `LinksFunction`, `Route`, `EntryRoute`
871 - The `RouteManifest` type used by the "remix" code is now slightly stricter because it is using the former `@remix-run/router` `RouteManifest`
872 - `Record<string, Route> -> Record<string, Route | undefined>`
873 - Removed `AppData` type in favor of inlining `unknown` in the few locations it was used
874 - Removed `ServerRuntimeMeta*` types in favor of the `Meta*` types they were duplicated from
875
876- - Remove the `future.v7_partialHydration` flag ([#11725](https://github.com/remix-run/react-router/pull/11725))
877 - This also removes the `<RouterProvider fallbackElement>` prop
878 - To migrate, move the `fallbackElement` to a `hydrateFallbackElement`/`HydrateFallback` on your root route
879 - Also worth nothing there is a related breaking changer with this future flag:
880 - Without `future.v7_partialHydration` (when using `fallbackElement`), `state.navigation` was populated during the initial load
881 - With `future.v7_partialHydration`, `state.navigation` remains in an `"idle"` state during the initial load
882
883- Remove `v7_relativeSplatPath` future flag ([#11695](https://github.com/remix-run/react-router/pull/11695))
884
885- Drop support for Node 18, update minimum Node vestion to 20 ([#12171](https://github.com/remix-run/react-router/pull/12171))
886 - Remove `installGlobals()` as this should no longer be necessary
887
888- Remove remaining future flags ([#11820](https://github.com/remix-run/react-router/pull/11820))
889 - React Router `v7_skipActionErrorRevalidation`
890 - Remix `v3_fetcherPersist`, `v3_relativeSplatPath`, `v3_throwAbortReason`
891
892- rename createRemixStub to createRoutesStub ([#11692](https://github.com/remix-run/react-router/pull/11692))
893
894- Remove `@remix-run/router` deprecated `detectErrorBoundary` option in favor of `mapRouteProperties` ([#11751](https://github.com/remix-run/react-router/pull/11751))
895
896- Add `react-router/dom` subpath export to properly enable `react-dom` as an optional `peerDependency` ([#11851](https://github.com/remix-run/react-router/pull/11851))
897 - This ensures that we don't blindly `import ReactDOM from "react-dom"` in `<RouterProvider>` in order to access `ReactDOM.flushSync()`, since that would break `createMemoryRouter` use cases in non-DOM environments
898 - DOM environments should import from `react-router/dom` to get the proper component that makes `ReactDOM.flushSync()` available:
899 - If you are using the Vite plugin, use this in your `entry.client.tsx`:
900 - `import { HydratedRouter } from 'react-router/dom'`
901 - If you are not using the Vite plugin and are manually calling `createBrowserRouter`/`createHashRouter`:
902 - `import { RouterProvider } from "react-router/dom"`
903
904- Remove `future.v7_fetcherPersist` flag ([#11731](https://github.com/remix-run/react-router/pull/11731))
905
906- Update `cookie` dependency to `^1.0.1` - please see the [release notes](https://github.com/jshttp/cookie/releases) for any breaking changes ([#12172](https://github.com/remix-run/react-router/pull/12172))
907
908### Minor Changes
909
910- - Add support for `prerender` config in the React Router vite plugin, to support existing SSG use-cases ([#11539](https://github.com/remix-run/react-router/pull/11539))
911 - You can use the `prerender` config to pre-render your `.html` and `.data` files at build time and then serve them statically at runtime (either from a running server or a CDN)
912 - `prerender` can either be an array of string paths, or a function (sync or async) that returns an array of strings so that you can dynamically generate the paths by talking to your CMS, etc.
913
914 ```ts
915 // react-router.config.ts
916 import type { Config } from "@react-router/dev/config";
917
918 export default {
919 async prerender() {
920 let slugs = await fakeGetSlugsFromCms();
921 // Prerender these paths into `.html` files at build time, and `.data`
922 // files if they have loaders
923 return ["/", "/about", ...slugs.map((slug) => `/product/${slug}`)];
924 },
925 } satisfies Config;
926
927 async function fakeGetSlugsFromCms() {
928 await new Promise((r) => setTimeout(r, 1000));
929 return ["shirt", "hat"];
930 }
931 ```
932
933- Params, loader data, and action data as props for route component exports ([#11961](https://github.com/remix-run/react-router/pull/11961))
934
935 ```tsx
936 export default function Component({ params, loaderData, actionData }) {}
937
938 export function HydrateFallback({ params }) {}
939 export function ErrorBoundary({ params, loaderData, actionData }) {}
940 ```
941
942- Remove duplicate `RouterProvider` impliementations ([#11679](https://github.com/remix-run/react-router/pull/11679))
943
944- ### Typesafety improvements ([#12019](https://github.com/remix-run/react-router/pull/12019))
945
946 React Router now generates types for each of your route modules.
947 You can access those types by importing them from `./+types.<route filename without extension>`.
948 For example:
949
950 ```ts
951 // app/routes/product.tsx
952 import type * as Route from "./+types.product";
953
954 export function loader({ params }: Route.LoaderArgs) {}
955
956 export default function Component({ loaderData }: Route.ComponentProps) {}
957 ```
958
959 This initial implementation targets type inference for:
960
961 - `Params` : Path parameters from your routing config in `routes.ts` including file-based routing
962 - `LoaderData` : Loader data from `loader` and/or `clientLoader` within your route module
963 - `ActionData` : Action data from `action` and/or `clientAction` within your route module
964
965 In the future, we plan to add types for the rest of the route module exports: `meta`, `links`, `headers`, `shouldRevalidate`, etc.
966 We also plan to generate types for typesafe `Link`s:
967
968 ```tsx
969 <Link to="/products/:id" params={{ id: 1 }} />
970 // ^^^^^^^^^^^^^ ^^^^^^^^^
971 // typesafe `to` and `params` based on the available routes in your app
972 ```
973
974 Check out our docs for more:
975
976 - [_Explanations > Type Safety_](https://reactrouter.com/dev/guides/explanation/type-safety)
977 - [_How-To > Setting up type safety_](https://reactrouter.com/dev/guides/how-to/setting-up-type-safety)
978
979- Stabilize `unstable_dataStrategy` ([#11969](https://github.com/remix-run/react-router/pull/11969))
980
981- Stabilize `unstable_patchRoutesOnNavigation` ([#11970](https://github.com/remix-run/react-router/pull/11970))
982
983### Patch Changes
984
985- No changes ([`506329c4e`](https://github.com/remix-run/react-router/commit/506329c4e2e7aba9837cbfa44df6103b49423745))
986
987- chore: re-enable development warnings through a `development` exports condition. ([#12269](https://github.com/remix-run/react-router/pull/12269))
988
989- Remove unstable upload handler. ([#12015](https://github.com/remix-run/react-router/pull/12015))
990
991- Remove unneeded dependency on @web3-storage/multipart-parser ([#12274](https://github.com/remix-run/react-router/pull/12274))
992
993- Fix redirects returned from loaders/actions using `data()` ([#12021](https://github.com/remix-run/react-router/pull/12021))
994
995- fix(react-router): (v7) fix static prerender of non-ascii characters ([#12161](https://github.com/remix-run/react-router/pull/12161))
996
997- Replace `substr` with `substring` ([#12080](https://github.com/remix-run/react-router/pull/12080))
998
999- Remove the deprecated `json` utility ([#12146](https://github.com/remix-run/react-router/pull/12146))
1000 - You can use [`Response.json`](https://developer.mozilla.org/en-US/docs/Web/API/Response/json_static) if you still need to construct JSON responses in your app
1001
1002- Remove unneeded dependency on source-map ([#12275](https://github.com/remix-run/react-router/pull/12275))
1003
1004## 6.28.0
1005
1006### Minor Changes
1007
1008- - Log deprecation warnings for v7 flags ([#11750](https://github.com/remix-run/react-router/pull/11750))
1009 - Add deprecation warnings to `json`/`defer` in favor of returning raw objects
1010 - These methods will be removed in React Router v7
1011
1012### Patch Changes
1013
1014- Update JSDoc URLs for new website structure (add /v6/ segment) ([#12141](https://github.com/remix-run/react-router/pull/12141))
1015- Updated dependencies:
1016 - `@remix-run/router@1.21.0`
1017
1018## 6.27.0
1019
1020### Minor Changes
1021
1022- Stabilize `unstable_patchRoutesOnNavigation` ([#11973](https://github.com/remix-run/react-router/pull/11973))
1023 - Add new `PatchRoutesOnNavigationFunctionArgs` type for convenience ([#11967](https://github.com/remix-run/react-router/pull/11967))
1024- Stabilize `unstable_dataStrategy` ([#11974](https://github.com/remix-run/react-router/pull/11974))
1025- Stabilize the `unstable_flushSync` option for navigations and fetchers ([#11989](https://github.com/remix-run/react-router/pull/11989))
1026- Stabilize the `unstable_viewTransition` option for navigations and the corresponding `unstable_useViewTransitionState` hook ([#11989](https://github.com/remix-run/react-router/pull/11989))
1027
1028### Patch Changes
1029
1030- Fix bug when submitting to the current contextual route (parent route with an index child) when an `?index` param already exists from a prior submission ([#12003](https://github.com/remix-run/react-router/pull/12003))
1031
1032- Fix `useFormAction` bug - when removing `?index` param it would not keep other non-Remix `index` params ([#12003](https://github.com/remix-run/react-router/pull/12003))
1033
1034- Fix types for `RouteObject` within `PatchRoutesOnNavigationFunction`'s `patch` method so it doesn't expect agnostic route objects passed to `patch` ([#11967](https://github.com/remix-run/react-router/pull/11967))
1035
1036- Updated dependencies:
1037 - `@remix-run/router@1.20.0`
1038
1039## 6.26.2
1040
1041### Patch Changes
1042
1043- Updated dependencies:
1044 - `@remix-run/router@1.19.2`
1045
1046## 6.26.1
1047
1048### Patch Changes
1049
1050- Rename `unstable_patchRoutesOnMiss` to `unstable_patchRoutesOnNavigation` to match new behavior ([#11888](https://github.com/remix-run/react-router/pull/11888))
1051- Updated dependencies:
1052 - `@remix-run/router@1.19.1`
1053
1054## 6.26.0
1055
1056### Minor Changes
1057
1058- Add a new `replace(url, init?)` alternative to `redirect(url, init?)` that performs a `history.replaceState` instead of a `history.pushState` on client-side navigation redirects ([#11811](https://github.com/remix-run/react-router/pull/11811))
1059
1060### Patch Changes
1061
1062- Fix initial hydration behavior when using `future.v7_partialHydration` along with `unstable_patchRoutesOnMiss` ([#11838](https://github.com/remix-run/react-router/pull/11838))
1063 - During initial hydration, `router.state.matches` will now include any partial matches so that we can render ancestor `HydrateFallback` components
1064- Updated dependencies:
1065 - `@remix-run/router@1.19.0`
1066
1067## 6.25.1
1068
1069No significant changes to this package were made in this release. [See the repo `CHANGELOG.md`](https://github.com/remix-run/react-router/blob/main/CHANGELOG.md) for an overview of all changes in v6.25.1.
1070
1071## 6.25.0
1072
1073### Minor Changes
1074
1075- Stabilize `future.unstable_skipActionErrorRevalidation` as `future.v7_skipActionErrorRevalidation` ([#11769](https://github.com/remix-run/react-router/pull/11769))
1076 - When this flag is enabled, actions will not automatically trigger a revalidation if they return/throw a `Response` with a `4xx`/`5xx` status code
1077 - You may still opt-into revalidation via `shouldRevalidate`
1078 - This also changes `shouldRevalidate`'s `unstable_actionStatus` parameter to `actionStatus`
1079
1080### Patch Changes
1081
1082- Fix regression and properly decode paths inside `useMatch` so matches/params reflect decoded params ([#11789](https://github.com/remix-run/react-router/pull/11789))
1083- Updated dependencies:
1084 - `@remix-run/router@1.18.0`
1085
1086## 6.24.1
1087
1088### Patch Changes
1089
1090- When using `future.v7_relativeSplatPath`, properly resolve relative paths in splat routes that are children of pathless routes ([#11633](https://github.com/remix-run/react-router/pull/11633))
1091- Updated dependencies:
1092 - `@remix-run/router@1.17.1`
1093
1094## 6.24.0
1095
1096### Minor Changes
1097
1098- Add support for Lazy Route Discovery (a.k.a. Fog of War) ([#11626](https://github.com/remix-run/react-router/pull/11626))
1099 - RFC: <https://github.com/remix-run/react-router/discussions/11113>
1100 - `unstable_patchRoutesOnMiss` docs: <https://reactrouter.com/v6/routers/create-browser-router>
1101
1102### Patch Changes
1103
1104- Updated dependencies:
1105 - `@remix-run/router@1.17.0`
1106
1107## 6.23.1
1108
1109### Patch Changes
1110
1111- allow undefined to be resolved with `<Await>` ([#11513](https://github.com/remix-run/react-router/pull/11513))
1112- Updated dependencies:
1113 - `@remix-run/router@1.16.1`
1114
1115## 6.23.0
1116
1117### Minor Changes
1118
1119- Add a new `unstable_dataStrategy` configuration option ([#11098](https://github.com/remix-run/react-router/pull/11098))
1120 - This option allows Data Router applications to take control over the approach for executing route loaders and actions
1121 - The default implementation is today's behavior, to fetch all loaders in parallel, but this option allows users to implement more advanced data flows including Remix single-fetch, middleware/context APIs, automatic loader caching, and more
1122
1123### Patch Changes
1124
1125- Updated dependencies:
1126 - `@remix-run/router@1.16.0`
1127
1128## 6.22.3
1129
1130### Patch Changes
1131
1132- Updated dependencies:
1133 - `@remix-run/router@1.15.3`
1134
1135## 6.22.2
1136
1137### Patch Changes
1138
1139- Updated dependencies:
1140 - `@remix-run/router@1.15.2`
1141
1142## 6.22.1
1143
1144### Patch Changes
1145
1146- Fix encoding/decoding issues with pre-encoded dynamic parameter values ([#11199](https://github.com/remix-run/react-router/pull/11199))
1147- Updated dependencies:
1148 - `@remix-run/router@1.15.1`
1149
1150## 6.22.0
1151
1152### Patch Changes
1153
1154- Updated dependencies:
1155 - `@remix-run/router@1.15.0`
1156
1157## 6.21.3
1158
1159### Patch Changes
1160
1161- Remove leftover `unstable_` prefix from `Blocker`/`BlockerFunction` types ([#11187](https://github.com/remix-run/react-router/pull/11187))
1162
1163## 6.21.2
1164
1165### Patch Changes
1166
1167- Updated dependencies:
1168 - `@remix-run/router@1.14.2`
1169
1170## 6.21.1
1171
1172### Patch Changes
1173
1174- Fix bug with `route.lazy` not working correctly on initial SPA load when `v7_partialHydration` is specified ([#11121](https://github.com/remix-run/react-router/pull/11121))
1175- Updated dependencies:
1176 - `@remix-run/router@1.14.1`
1177
1178## 6.21.0
1179
1180### Minor Changes
1181
1182- 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))
1183
1184 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))
1185
1186 **The Bug**
1187 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.
1188
1189 **The Background**
1190 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:
1191
1192 ```jsx
1193 <BrowserRouter>
1194 <Routes>
1195 <Route path="/" element={<Home />} />
1196 <Route path="dashboard/*" element={<Dashboard />} />
1197 </Routes>
1198 </BrowserRouter>
1199 ```
1200
1201 Any paths like `/dashboard`, `/dashboard/team`, `/dashboard/projects` will match the `Dashboard` route. The dashboard component itself can then render nested `<Routes>`:
1202
1203 ```jsx
1204 function Dashboard() {
1205 return (
1206 <div>
1207 <h2>Dashboard</h2>
1208 <nav>
1209 <Link to="/">Dashboard Home</Link>
1210 <Link to="team">Team</Link>
1211 <Link to="projects">Projects</Link>
1212 </nav>
1213
1214 <Routes>
1215 <Route path="/" element={<DashboardHome />} />
1216 <Route path="team" element={<DashboardTeam />} />
1217 <Route path="projects" element={<DashboardProjects />} />
1218 </Routes>
1219 </div>
1220 );
1221 }
1222 ```
1223
1224 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.
1225
1226 **The Problem**
1227
1228 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 `"."`:
1229
1230 ```jsx
1231 // If we are on URL /dashboard/team, and we want to link to /dashboard/team:
1232 function DashboardTeam() {
1233 // ❌ This is broken and results in <a href="/dashboard">
1234 return <Link to=".">A broken link to the Current URL</Link>;
1235
1236 // ✅ This is fixed but super unintuitive since we're already at /dashboard/team!
1237 return <Link to="./team">A broken link to the Current URL</Link>;
1238 }
1239 ```
1240
1241 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.
1242
1243 Even worse, consider a nested splat route configuration:
1244
1245 ```jsx
1246 <BrowserRouter>
1247 <Routes>
1248 <Route path="dashboard">
1249 <Route path="*" element={<Dashboard />} />
1250 </Route>
1251 </Routes>
1252 </BrowserRouter>
1253 ```
1254
1255 Now, a `<Link to=".">` and a `<Link to="..">` inside the `Dashboard` component go to the same place! That is definitely not correct!
1256
1257 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:
1258
1259 ```jsx
1260 let router = createBrowserRouter({
1261 path: "/dashboard",
1262 children: [
1263 {
1264 path: "*",
1265 action: dashboardAction,
1266 Component() {
1267 // ❌ This form is broken! It throws a 405 error when it submits because
1268 // it tries to submit to /dashboard (without the splat value) and the parent
1269 // `/dashboard` route doesn't have an action
1270 return <Form method="post">...</Form>;
1271 },
1272 },
1273 ],
1274 });
1275 ```
1276
1277 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.
1278
1279 **The Solution**
1280 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:
1281
1282 ```jsx
1283 <BrowserRouter>
1284 <Routes>
1285 <Route path="dashboard">
1286 <Route index path="*" element={<Dashboard />} />
1287 </Route>
1288 </Routes>
1289 </BrowserRouter>
1290
1291 function Dashboard() {
1292 return (
1293 <div>
1294 <h2>Dashboard</h2>
1295 <nav>
1296 <Link to="..">Dashboard Home</Link>
1297 <Link to="../team">Team</Link>
1298 <Link to="../projects">Projects</Link>
1299 </nav>
1300
1301 <Routes>
1302 <Route path="/" element={<DashboardHome />} />
1303 <Route path="team" element={<DashboardTeam />} />
1304 <Route path="projects" element={<DashboardProjects />} />
1305 </Router>
1306 </div>
1307 );
1308 }
1309 ```
1310
1311 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".
1312
1313### Patch Changes
1314
1315- Properly handle falsy error values in ErrorBoundary's ([#11071](https://github.com/remix-run/react-router/pull/11071))
1316- Updated dependencies:
1317 - `@remix-run/router@1.14.0`
1318
1319## 6.20.1
1320
1321### Patch Changes
1322
1323- 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))
1324- Updated dependencies:
1325 - `@remix-run/router@1.13.1`
1326
1327## 6.20.0
1328
1329### Minor Changes
1330
1331- Export the `PathParam` type from the public API ([#10719](https://github.com/remix-run/react-router/pull/10719))
1332
1333### Patch Changes
1334
1335- Fix bug with `resolveTo` in splat routes ([#11045](https://github.com/remix-run/react-router/pull/11045))
1336 - This is a follow up to [#10983](https://github.com/remix-run/react-router/pull/10983) to handle the few other code paths using `getPathContributingMatches`
1337 - This removes the `UNSAFE_getPathContributingMatches` export from `@remix-run/router` since we no longer need this in the `react-router`/`react-router-dom` layers
1338- Updated dependencies:
1339 - `@remix-run/router@1.13.0`
1340
1341## 6.19.0
1342
1343### Minor Changes
1344
1345- 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))
1346- Remove the `unstable_` prefix from the [`useBlocker`](https://reactrouter.com/v6/hooks/use-blocker) hook as it's been in use for enough time that we are confident in the API. We do not plan to remove the prefix from `unstable_usePrompt` due to differences in how browsers handle `window.confirm` that prevent React Router from guaranteeing consistent/correct behavior. ([#10991](https://github.com/remix-run/react-router/pull/10991))
1347
1348### Patch Changes
1349
1350- Fix `useActionData` so it returns proper contextual action data and not _any_ action data in the tree ([#11023](https://github.com/remix-run/react-router/pull/11023))
1351
1352- Fix bug in `useResolvedPath` that would cause `useResolvedPath(".")` in a splat route to lose the splat portion of the URL path. ([#10983](https://github.com/remix-run/react-router/pull/10983))
1353 - ⚠️ This fixes a quite long-standing bug specifically for `"."` paths inside a splat route which incorrectly dropped the splat portion of the URL. If you are relative routing via `"."` inside a splat route in your application you should double check that your logic is not relying on this buggy behavior and update accordingly.
1354
1355- Updated dependencies:
1356 - `@remix-run/router@1.12.0`
1357
1358## 6.18.0
1359
1360### Patch Changes
1361
1362- 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))
1363- Updated dependencies:
1364 - `@remix-run/router@1.11.0`
1365
1366## 6.17.0
1367
1368### Patch Changes
1369
1370- Fix `RouterProvider` `future` prop type to be a `Partial<FutureConfig>` so that not all flags must be specified ([#10900](https://github.com/remix-run/react-router/pull/10900))
1371- Updated dependencies:
1372 - `@remix-run/router@1.10.0`
1373
1374## 6.16.0
1375
1376### Minor Changes
1377
1378- In order to move towards stricter TypeScript support in the future, we're aiming to replace current usages of `any` with `unknown` on exposed typings for user-provided data. To do this in Remix v2 without introducing breaking changes in React Router v6, we have added generics to a number of shared types. These continue to default to `any` in React Router and are overridden with `unknown` in Remix. In React Router v7 we plan to move these to `unknown` as a breaking change. ([#10843](https://github.com/remix-run/react-router/pull/10843))
1379 - `Location` now accepts a generic for the `location.state` value
1380 - `ActionFunctionArgs`/`ActionFunction`/`LoaderFunctionArgs`/`LoaderFunction` now accept a generic for the `context` parameter (only used in SSR usages via `createStaticHandler`)
1381 - The return type of `useMatches` (now exported as `UIMatch`) accepts generics for `match.data` and `match.handle` - both of which were already set to `unknown`
1382- Move the `@private` class export `ErrorResponse` to an `UNSAFE_ErrorResponseImpl` export since it is an implementation detail and there should be no construction of `ErrorResponse` instances in userland. This frees us up to export a `type ErrorResponse` which correlates to an instance of the class via `InstanceType`. Userland code should only ever be using `ErrorResponse` as a type and should be type-narrowing via `isRouteErrorResponse`. ([#10811](https://github.com/remix-run/react-router/pull/10811))
1383- Export `ShouldRevalidateFunctionArgs` interface ([#10797](https://github.com/remix-run/react-router/pull/10797))
1384- Removed private/internal APIs only required for the Remix v1 backwards compatibility layer and no longer needed in Remix v2 (`_isFetchActionRedirect`, `_hasFetcherDoneAnything`) ([#10715](https://github.com/remix-run/react-router/pull/10715))
1385
1386### Patch Changes
1387
1388- Updated dependencies:
1389 - `@remix-run/router@1.9.0`
1390
1391## 6.15.0
1392
1393### Minor Changes
1394
1395- 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))
1396
1397### Patch Changes
1398
1399- Ensure `useRevalidator` is referentially stable across re-renders if revalidations are not actively occurring ([#10707](https://github.com/remix-run/react-router/pull/10707))
1400- Updated dependencies:
1401 - `@remix-run/router@1.8.0`
1402
1403## 6.14.2
1404
1405### Patch Changes
1406
1407- Updated dependencies:
1408 - `@remix-run/router@1.7.2`
1409
1410## 6.14.1
1411
1412### Patch Changes
1413
1414- Fix loop in `unstable_useBlocker` when used with an unstable blocker function ([#10652](https://github.com/remix-run/react-router/pull/10652))
1415- Fix issues with reused blockers on subsequent navigations ([#10656](https://github.com/remix-run/react-router/pull/10656))
1416- Updated dependencies:
1417 - `@remix-run/router@1.7.1`
1418
1419## 6.14.0
1420
1421### Patch Changes
1422
1423- Strip `basename` from locations provided to `unstable_useBlocker` functions to match `useLocation` ([#10573](https://github.com/remix-run/react-router/pull/10573))
1424- Fix `generatePath` when passed a numeric `0` value parameter ([#10612](https://github.com/remix-run/react-router/pull/10612))
1425- Fix `unstable_useBlocker` key issues in `StrictMode` ([#10573](https://github.com/remix-run/react-router/pull/10573))
1426- Fix `tsc --skipLibCheck:false` issues on React 17 ([#10622](https://github.com/remix-run/react-router/pull/10622))
1427- Upgrade `typescript` to 5.1 ([#10581](https://github.com/remix-run/react-router/pull/10581))
1428- Updated dependencies:
1429 - `@remix-run/router@1.7.0`
1430
1431## 6.13.0
1432
1433### Minor Changes
1434
1435- Move [`React.startTransition`](https://react.dev/reference/react/startTransition) usage behind a [future flag](https://reactrouter.com/v6/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))
1436
1437 Existing behavior will no longer include `React.startTransition`:
1438
1439 ```jsx
1440 <BrowserRouter>
1441 <Routes>{/*...*/}</Routes>
1442 </BrowserRouter>
1443
1444 <RouterProvider router={router} />
1445 ```
1446
1447 If you wish to enable `React.startTransition`, pass the future flag to your component:
1448
1449 ```jsx
1450 <BrowserRouter future={{ v7_startTransition: true }}>
1451 <Routes>{/*...*/}</Routes>
1452 </BrowserRouter>
1453
1454 <RouterProvider router={router} future={{ v7_startTransition: true }}/>
1455 ```
1456
1457### Patch Changes
1458
1459- Work around webpack/terser `React.startTransition` minification bug in production mode ([#10588](https://github.com/remix-run/react-router/pull/10588))
1460
1461## 6.12.1
1462
1463> \[!WARNING]
1464> 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.
1465
1466### Patch Changes
1467
1468- Adjust feature detection of `React.startTransition` to fix webpack + react 17 compilation error ([#10569](https://github.com/remix-run/react-router/pull/10569))
1469
1470## 6.12.0
1471
1472### Minor Changes
1473
1474- Wrap internal router state updates with `React.startTransition` if it exists ([#10438](https://github.com/remix-run/react-router/pull/10438))
1475
1476### Patch Changes
1477
1478- Updated dependencies:
1479 - `@remix-run/router@1.6.3`
1480
1481## 6.11.2
1482
1483### Patch Changes
1484
1485- Fix `basename` duplication in descendant `<Routes>` inside a `<RouterProvider>` ([#10492](https://github.com/remix-run/react-router/pull/10492))
1486- Updated dependencies:
1487 - `@remix-run/router@1.6.2`
1488
1489## 6.11.1
1490
1491### Patch Changes
1492
1493- Fix usage of `Component` API within descendant `<Routes>` ([#10434](https://github.com/remix-run/react-router/pull/10434))
1494- Fix bug when calling `useNavigate` from `<Routes>` inside a `<RouterProvider>` ([#10432](https://github.com/remix-run/react-router/pull/10432))
1495- Fix usage of `<Navigate>` in strict mode when using a data router ([#10435](https://github.com/remix-run/react-router/pull/10435))
1496- Updated dependencies:
1497 - `@remix-run/router@1.6.1`
1498
1499## 6.11.0
1500
1501### Patch Changes
1502
1503- Log loader/action errors to the console in dev for easier stack trace evaluation ([#10286](https://github.com/remix-run/react-router/pull/10286))
1504- Fix bug preventing rendering of descendant `<Routes>` when `RouterProvider` errors existed ([#10374](https://github.com/remix-run/react-router/pull/10374))
1505- Fix inadvertent re-renders when using `Component` instead of `element` on a route definition ([#10287](https://github.com/remix-run/react-router/pull/10287))
1506- Fix detection of `useNavigate` in the render cycle by setting the `activeRef` in a layout effect, allowing the `navigate` function to be passed to child components and called in a `useEffect` there. ([#10394](https://github.com/remix-run/react-router/pull/10394))
1507- 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))
1508- Allow `useRevalidator()` to resolve a loader-driven error boundary scenario ([#10369](https://github.com/remix-run/react-router/pull/10369))
1509- Avoid unnecessary unsubscribe/resubscribes on router state changes ([#10409](https://github.com/remix-run/react-router/pull/10409))
1510- 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))
1511- Updated dependencies:
1512 - `@remix-run/router@1.6.0`
1513
1514## 6.10.0
1515
1516### Minor Changes
1517
1518- Added support for [**Future Flags**](https://reactrouter.com/v6/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))
1519 - When `future.v7_normalizeFormMethod === false` (default v6 behavior),
1520 - `useNavigation().formMethod` is lowercase
1521 - `useFetcher().formMethod` is lowercase
1522 - When `future.v7_normalizeFormMethod === true`:
1523 - `useNavigation().formMethod` is uppercase
1524 - `useFetcher().formMethod` is uppercase
1525
1526### Patch Changes
1527
1528- Fix route ID generation when using Fragments in `createRoutesFromElements` ([#10193](https://github.com/remix-run/react-router/pull/10193))
1529- Updated dependencies:
1530 - `@remix-run/router@1.5.0`
1531
1532## 6.9.0
1533
1534### Minor Changes
1535
1536- 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))
1537
1538 **Example JSON Syntax**
1539
1540 ```jsx
1541 // Both of these work the same:
1542 const elementRoutes = [{
1543 path: '/',
1544 element: <Home />,
1545 errorElement: <HomeError />,
1546 }]
1547
1548 const componentRoutes = [{
1549 path: '/',
1550 Component: Home,
1551 ErrorBoundary: HomeError,
1552 }]
1553
1554 function Home() { ... }
1555 function HomeError() { ... }
1556 ```
1557
1558 **Example JSX Syntax**
1559
1560 ```jsx
1561 // Both of these work the same:
1562 const elementRoutes = createRoutesFromElements(
1563 <Route path='/' element={<Home />} errorElement={<HomeError /> } />
1564 );
1565
1566 const componentRoutes = createRoutesFromElements(
1567 <Route path='/' Component={Home} ErrorBoundary={HomeError} />
1568 );
1569
1570 function Home() { ... }
1571 function HomeError() { ... }
1572 ```
1573
1574- **Introducing Lazy Route Modules!** ([#10045](https://github.com/remix-run/react-router/pull/10045))
1575
1576 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`).
1577
1578 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.
1579
1580 Your `lazy` functions will typically return the result of a dynamic import.
1581
1582 ```jsx
1583 // In this example, we assume most folks land on the homepage so we include that
1584 // in our critical-path bundle, but then we lazily load modules for /a and /b so
1585 // they don't load until the user navigates to those routes
1586 let routes = createRoutesFromElements(
1587 <Route path="/" element={<Layout />}>
1588 <Route index element={<Home />} />
1589 <Route path="a" lazy={() => import("./a")} />
1590 <Route path="b" lazy={() => import("./b")} />
1591 </Route>,
1592 );
1593 ```
1594
1595 Then in your lazy route modules, export the properties you want defined for the route:
1596
1597 ```jsx
1598 export async function loader({ request }) {
1599 let data = await fetchData(request);
1600 return json(data);
1601 }
1602
1603 // Export a `Component` directly instead of needing to create a React Element from it
1604 export function Component() {
1605 let data = useLoaderData();
1606
1607 return (
1608 <>
1609 <h1>You made it!</h1>
1610 <p>{data}</p>
1611 </>
1612 );
1613 }
1614
1615 // Export an `ErrorBoundary` directly instead of needing to create a React Element from it
1616 export function ErrorBoundary() {
1617 let error = useRouteError();
1618 return isRouteErrorResponse(error) ? (
1619 <h1>
1620 {error.status} {error.statusText}
1621 </h1>
1622 ) : (
1623 <h1>{error.message || error}</h1>
1624 );
1625 }
1626 ```
1627
1628 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.
1629
1630 🙌 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).
1631
1632- Updated dependencies:
1633 - `@remix-run/router@1.4.0`
1634
1635### Patch Changes
1636
1637- Fix `generatePath` incorrectly applying parameters in some cases ([#10078](https://github.com/remix-run/react-router/pull/10078))
1638- Improve memoization for context providers to avoid unnecessary re-renders ([#9983](https://github.com/remix-run/react-router/pull/9983))
1639
1640## 6.8.2
1641
1642### Patch Changes
1643
1644- Updated dependencies:
1645 - `@remix-run/router@1.3.3`
1646
1647## 6.8.1
1648
1649### Patch Changes
1650
1651- Remove inaccurate console warning for POP navigations and update active blocker logic ([#10030](https://github.com/remix-run/react-router/pull/10030))
1652- Updated dependencies:
1653 - `@remix-run/router@1.3.2`
1654
1655## 6.8.0
1656
1657### Patch Changes
1658
1659- Updated dependencies:
1660 - `@remix-run/router@1.3.1`
1661
1662## 6.7.0
1663
1664### Minor Changes
1665
1666- Add `unstable_useBlocker` hook for blocking navigations within the app's location origin ([#9709](https://github.com/remix-run/react-router/pull/9709))
1667
1668### Patch Changes
1669
1670- Fix `generatePath` when optional params are present ([#9764](https://github.com/remix-run/react-router/pull/9764))
1671- Update `<Await>` to accept `ReactNode` as children function return result ([#9896](https://github.com/remix-run/react-router/pull/9896))
1672- Updated dependencies:
1673 - `@remix-run/router@1.3.0`
1674
1675## 6.6.2
1676
1677### Patch Changes
1678
1679- Ensure `useId` consistency during SSR ([#9805](https://github.com/remix-run/react-router/pull/9805))
1680
1681## 6.6.1
1682
1683### Patch Changes
1684
1685- Updated dependencies:
1686 - `@remix-run/router@1.2.1`
1687
1688## 6.6.0
1689
1690### Patch Changes
1691
1692- Prevent `useLoaderData` usage in `errorElement` ([#9735](https://github.com/remix-run/react-router/pull/9735))
1693- Updated dependencies:
1694 - `@remix-run/router@1.2.0`
1695
1696## 6.5.0
1697
1698This release introduces support for [Optional Route Segments](https://github.com/remix-run/react-router/issues/9546). Now, adding a `?` to the end of any path segment will make that entire segment optional. This works for both static segments and dynamic parameters.
1699
1700**Optional Params Examples**
1701
1702- `<Route path=":lang?/about>` will match:
1703 - `/:lang/about`
1704 - `/about`
1705- `<Route path="/multistep/:widget1?/widget2?/widget3?">` will match:
1706 - `/multistep`
1707 - `/multistep/:widget1`
1708 - `/multistep/:widget1/:widget2`
1709 - `/multistep/:widget1/:widget2/:widget3`
1710
1711**Optional Static Segment Example**
1712
1713- `<Route path="/home?">` will match:
1714 - `/`
1715 - `/home`
1716- `<Route path="/fr?/about">` will match:
1717 - `/about`
1718 - `/fr/about`
1719
1720### Minor Changes
1721
1722- Allows optional routes and optional static segments ([#9650](https://github.com/remix-run/react-router/pull/9650))
1723
1724### Patch Changes
1725
1726- Stop incorrectly matching on partial named parameters, i.e. `<Route path="prefix-:param">`, to align with how splat parameters work. If you were previously relying on this behavior then it's recommended to extract the static portion of the path at the `useParams` call site: ([#9506](https://github.com/remix-run/react-router/pull/9506))
1727
1728```jsx
1729// Old behavior at URL /prefix-123
1730<Route path="prefix-:id" element={<Comp /> }>
1731
1732function Comp() {
1733 let params = useParams(); // { id: '123' }
1734 let id = params.id; // "123"
1735 ...
1736}
1737
1738// New behavior at URL /prefix-123
1739<Route path=":id" element={<Comp /> }>
1740
1741function Comp() {
1742 let params = useParams(); // { id: 'prefix-123' }
1743 let id = params.id.replace(/^prefix-/, ''); // "123"
1744 ...
1745}
1746```
1747
1748- Updated dependencies:
1749 - `@remix-run/router@1.1.0`
1750
1751## 6.4.5
1752
1753### Patch Changes
1754
1755- Updated dependencies:
1756 - `@remix-run/router@1.0.5`
1757
1758## 6.4.4
1759
1760### Patch Changes
1761
1762- Updated dependencies:
1763 - `@remix-run/router@1.0.4`
1764
1765## 6.4.3
1766
1767### Patch Changes
1768
1769- `useRoutes` should be able to return `null` when passing `locationArg` ([#9485](https://github.com/remix-run/react-router/pull/9485))
1770- fix `initialEntries` type in `createMemoryRouter` ([#9498](https://github.com/remix-run/react-router/pull/9498))
1771- Updated dependencies:
1772 - `@remix-run/router@1.0.3`
1773
1774## 6.4.2
1775
1776### Patch Changes
1777
1778- Fix `IndexRouteObject` and `NonIndexRouteObject` types to make `hasErrorElement` optional ([#9394](https://github.com/remix-run/react-router/pull/9394))
1779- Enhance console error messages for invalid usage of data router hooks ([#9311](https://github.com/remix-run/react-router/pull/9311))
1780- 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))
1781- Updated dependencies:
1782 - `@remix-run/router@1.0.2`
1783
1784## 6.4.1
1785
1786### Patch Changes
1787
1788- Preserve state from `initialEntries` ([#9288](https://github.com/remix-run/react-router/pull/9288))
1789- Updated dependencies:
1790 - `@remix-run/router@1.0.1`
1791
1792## 6.4.0
1793
1794Whoa 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/en/6.4.0/start/overview) and the [tutorial](https://reactrouter.com/en/6.4.0/start/tutorial).
1795
1796**New APIs**
1797
1798- Create your router with `createMemoryRouter`
1799- Render your router with `<RouterProvider>`
1800- Load data with a Route `loader` and mutate with a Route `action`
1801- Handle errors with Route `errorElement`
1802- Defer non-critical data with `defer` and `Await`
1803
1804**Bug Fixes**
1805
1806- Path resolution is now trailing slash agnostic (#8861)
1807- `useLocation` returns the scoped location inside a `<Routes location>` component (#9094)
1808
1809**Updated Dependencies**
1810
1811- `@remix-run/router@1.0.0`