You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
- `react-router` - 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))
347
+
- `react-router` - Update `Route.MetaArgs` to reflect that `data` can be potentially `undefined` ([#13563](https://github.com/remix-run/react-router/pull/13563))
348
+
- 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
349
+
- `react-router` - 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))
- `@react-router/architect` - Update `@architect/functions` from `^5.2.0` to `^7.0.0` ([#13556](https://github.com/remix-run/react-router/pull/13556))
353
+
- `@react-router/dev` - Prevent typegen with route files that are outside the `app/` directory ([#12996](https://github.com/remix-run/react-router/pull/12996))
354
+
- `@react-router/dev` - Add additional logging to `build` command output when cleaning assets from server build ([#13547](https://github.com/remix-run/react-router/pull/13547))
355
+
- `@react-router/dev` - Don't clean assets from server build when `build.ssrEmitAssets` has been enabled in Vite config ([#13547](https://github.com/remix-run/react-router/pull/13547))
356
+
- `@react-router/dev` - Fix typegen when same route is used at multiple paths ([#13574](https://github.com/remix-run/react-router/pull/13574))
357
+
358
+
- For example, `routes/route.tsx` is used at 4 different paths here:
359
+
360
+
```ts
361
+
import { type RouteConfig, route } from "@react-router/dev/routes";
- Previously, typegen would arbitrarily pick one of these paths to be the "winner" and generate types for the route module based on that path
373
+
- Now, typegen creates unions as necessary for alternate paths for the same route file
374
+
375
+
- `@react-router/dev` - Better types for `params` ([#13543](https://github.com/remix-run/react-router/pull/13543))
376
+
377
+
- For example:
378
+
379
+
```ts
380
+
// routes.ts
381
+
import { type RouteConfig, route } from "@react-router/dev/routes";
382
+
383
+
export default [
384
+
route("parent/:p", "routes/parent.tsx", [
385
+
route("route/:r", "routes/route.tsx", [
386
+
route("child1/:c1a/:c1b", "routes/child1.tsx"),
387
+
route("child2/:c2a/:c2b", "routes/child2.tsx"),
388
+
]),
389
+
]),
390
+
] satisfies RouteConfig;
391
+
```
392
+
393
+
- Previously, `params` for `routes/route` were calculated as `{ p: string, r: string }`.
394
+
- This incorrectly ignores params that could come from child routes
395
+
- If visiting `/parent/1/route/2/child1/3/4`, the actual params passed to `routes/route` will have a type of `{ p: string, r: string, c1a: string, c1b: string }`
396
+
- Now, `params` are aware of child routes and autocompletion will include child params as optionals:
397
+
398
+
```ts
399
+
params.|
400
+
// ^ cursor is here and you ask for autocompletion
401
+
// p: string
402
+
// r: string
403
+
// c1a?: string
404
+
// c1b?: string
405
+
// c2a?: string
406
+
// c2b?: string
407
+
```
408
+
409
+
- You can also narrow the types for `params` as it is implemented as a normalized union of params for each page that includes `routes/route`:
410
+
411
+
```ts
412
+
if (typeof params.c1a === 'string') {
413
+
params.|
414
+
// ^ cursor is here and you ask for autocompletion
415
+
// p: string
416
+
// r: string
417
+
// c1a: string
418
+
// c1b: string
419
+
}
420
+
```
421
+
422
+
- `@react-router/dev` - Fix `href` for optional segments ([#13595](https://github.com/remix-run/react-router/pull/13595))
423
+
424
+
- Type generation now expands paths with optionals into their corresponding non-optional paths
425
+
- For example, the path `/user/:id?` gets expanded into `/user` and `/user/:id` to more closely model visitable URLs
426
+
- `href` then uses these expanded (non-optional) paths to construct type-safe paths for your app:
427
+
428
+
```ts
429
+
// original: /user/:id?
430
+
// expanded: /user & /user/:id
431
+
href("/user"); // ✅
432
+
href("/user/:id", { id: 1 }); // ✅
433
+
```
434
+
435
+
- This becomes even more important for static optional paths where there wasn't a good way to indicate whether the optional should be included in the resulting path:
436
+
437
+
```ts
438
+
// original: /products/:id/detail?
439
+
440
+
// before
441
+
href("/products/:id/detail?"); // ❌ How can we tell `href` to include or omit `detail?` segment with a complex API?
442
+
443
+
// now
444
+
// expanded: /products/:id & /products/:id/detail
445
+
href("/product/:id"); // ✅
446
+
href("/product/:id/detail"); // ✅
447
+
```
448
+
449
+
### Unstable Changes
450
+
451
+
⚠️ _[Unstable features](https://reactrouter.com/community/api-development-strategy#unstable-flags) are not recommended for production use_
452
+
453
+
- `@react-router/dev` - Renamed internal `react-router/route-module` export to `react-router/internal` ([#13543](https://github.com/remix-run/react-router/pull/13543))
- `@react-router/dev` - Normalize dirent entry path across node versions when generating SRI manifest ([#13591](https://github.com/remix-run/react-router/pull/13591))
Copy file name to clipboardExpand all lines: docs/start/framework/route-module.md
+24Lines changed: 24 additions & 0 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -311,6 +311,30 @@ export default function Root() {
311
311
312
312
Route meta defines meta tags to be rendered in the `<Meta />` component, usually placed in the `<head>`.
313
313
314
+
<docs-warning>
315
+
316
+
Since React 19, [using the built-in `<meta>` element](https://react.dev/reference/react-dom/components/meta) is recommended over the use of the route module's `meta` export.
317
+
318
+
Here is an example of how to use it and the `<title>` element:
0 commit comments