fix: allow meta/scripts to be undefined (easier for conditionals)

TanStack · Nov 18, 2024 · adb3ab3 · adb3ab3
1 parent 8299698
commit adb3ab3
Show file tree

Hide file tree

Showing 4 changed files with 22 additions and 18 deletions.
diff --git a/packages/react-router/src/Matches.tsx b/packages/react-router/src/Matches.tsx
@@ -170,9 +170,9 @@ export interface RouteMatch<
   loaderDeps: TLoaderDeps
   preload: boolean
   invalid: boolean
-  meta?: Array<React.JSX.IntrinsicElements['meta']>
-  links?: Array<React.JSX.IntrinsicElements['link']>
-  scripts?: Array<React.JSX.IntrinsicElements['script']>
+  meta?: Array<React.JSX.IntrinsicElements['meta'] | undefined>
+  links?: Array<React.JSX.IntrinsicElements['link'] | undefined>
+  scripts?: Array<React.JSX.IntrinsicElements['script'] | undefined>
   headers?: Record<string, string>
   globalNotFound?: boolean
   staticData: StaticDataRouteOption

diff --git a/packages/react-router/src/route.ts b/packages/react-router/src/route.ts
@@ -17,6 +17,7 @@ import type * as React from 'react'
 import type { RootRouteId } from './root'
 import type { UseNavigateResult } from './useNavigate'
 import type {
+  AnyRouteMatch,
   MakeRouteMatchFromRoute,
   MakeRouteMatchUnion,
   RouteMatch,
@@ -471,9 +472,9 @@ export interface UpdatableRouteOptions<
     params: ResolveAllParamsFromParent<TParentRoute, TParams>
     loaderData: ResolveLoaderData<TLoaderFn> | undefined
   }) => {
-    links?: Array<React.JSX.IntrinsicElements['link']> | undefined
-    scripts?: Array<React.JSX.IntrinsicElements['script']> | undefined
-    meta?: Array<React.JSX.IntrinsicElements['meta']> | undefined
+    links?: AnyRouteMatch['links']
+    scripts?: AnyRouteMatch['scripts']
+    meta?: AnyRouteMatch['meta']
   }
   ssr?: boolean
 }

diff --git a/packages/start/src/client/Meta.tsx b/packages/start/src/client/Meta.tsx
@@ -20,6 +20,8 @@ export const useMeta = () => {
     let title: RouterManagedTag | undefined
     ;[...routeMeta].reverse().forEach((metas) => {
       ;[...metas].reverse().forEach((m) => {
+        if (!m) return
+
         if (m.title) {
           if (!title) {
             title = {

diff --git a/packages/start/src/client/Scripts.tsx b/packages/start/src/client/Scripts.tsx
@@ -30,18 +30,19 @@ export const Scripts = () => {
 
   const { scripts } = useRouterState({
     select: (state) => ({
-      scripts: state.matches
-        .map((match) => match.scripts!)
-        .filter(Boolean)
-        .flat(1)
-        .map(({ children, ...script }) => ({
-          tag: 'script',
-          attrs: {
-            ...script,
-            suppressHydrationWarning: true,
-          },
-          children,
-        })),
+      scripts: (
+        state.matches
+          .map((match) => match.scripts!)
+          .filter(Boolean)
+          .flat(1) as Array<RouterManagedTag>
+      ).map(({ children, ...script }) => ({
+        tag: 'script',
+        attrs: {
+          ...script,
+          suppressHydrationWarning: true,
+        },
+        children,
+      })),
     }),
   })