@tanstack/react-router 0.0.1-beta.3 → 0.0.1-beta.30

package/src/index.tsx

@@ -6,7 +6,9 @@ import {
   AnyRoute,
   CheckId,
   rootRouteId,
-  Router,
+  Route,
+  RegisteredAllRouteInfo,
+  RegisteredRouter,
   RouterState,
   ToIdOption,
 } from '@tanstack/router-core'
@@ -31,15 +33,113 @@ import {
   NoInfer,
   ToOptions,
   invariant,
+  Router,
 } from '@tanstack/router-core'
 
 export * from '@tanstack/router-core'
 
+export type SyncRouteComponent<TProps = {}> = (
+  props: TProps,
+) => JSX.Element | React.ReactNode
+
+export type RouteComponent<TProps = {}> = SyncRouteComponent<TProps> & {
+  preload?: () => Promise<SyncRouteComponent<TProps>>
+}
+
+export function lazy(
+  importer: () => Promise<{ default: SyncRouteComponent }>,
+): RouteComponent {
+  const lazyComp = React.lazy(importer as any)
+  let promise: Promise<SyncRouteComponent>
+  let resolvedComp: SyncRouteComponent
+
+  const forwardedComp = React.forwardRef((props, ref) => {
+    const resolvedCompRef = React.useRef(resolvedComp || lazyComp)
+    return React.createElement(
+      resolvedCompRef.current as any,
+      { ...(ref ? { ref } : {}), ...props } as any,
+    )
+  })
+
+  const finalComp = forwardedComp as unknown as RouteComponent
+
+  finalComp.preload = () => {
+    if (!promise) {
+      promise = importer().then((module) => {
+        resolvedComp = module.default
+        return resolvedComp
+      })
+    }
+
+    return promise
+  }
+
+  return finalComp
+}
+
+type LinkPropsOptions<
+  TAllRouteInfo extends AnyAllRouteInfo,
+  TFrom extends ValidFromPath<TAllRouteInfo>,
+  TTo extends string,
+> = LinkOptions<TAllRouteInfo, TFrom, TTo> & {
+  // A function that returns additional props for the `active` state of this link. These props override other props passed to the link (`style`'s are merged, `className`'s are concatenated)
+  activeProps?:
+    | React.AnchorHTMLAttributes<HTMLAnchorElement>
+    | (() => React.AnchorHTMLAttributes<HTMLAnchorElement>)
+  // A function that returns additional props for the `inactive` state of this link. These props override other props passed to the link (`style`'s are merged, `className`'s are concatenated)
+  inactiveProps?:
+    | React.AnchorHTMLAttributes<HTMLAnchorElement>
+    | (() => React.AnchorHTMLAttributes<HTMLAnchorElement>)
+}
+
+type MakeMatchRouteOptions<
+  TAllRouteInfo extends AnyAllRouteInfo,
+  TFrom extends ValidFromPath<TAllRouteInfo>,
+  TTo extends string,
+> = ToOptions<TAllRouteInfo, TFrom, TTo> &
+  MatchRouteOptions & {
+    // If a function is passed as a child, it will be given the `isActive` boolean to aid in further styling on the element it returns
+    children?:
+      | React.ReactNode
+      | ((
+          params: RouteInfoByPath<
+            TAllRouteInfo,
+            ResolveRelativePath<TFrom, NoInfer<TTo>>
+          >['allParams'],
+        ) => React.ReactNode)
+  }
+
+type MakeLinkPropsOptions<
+  TAllRouteInfo extends AnyAllRouteInfo,
+  TFrom extends ValidFromPath<TAllRouteInfo>,
+  TTo extends string,
+> = LinkPropsOptions<TAllRouteInfo, TFrom, TTo> &
+  React.AnchorHTMLAttributes<HTMLAnchorElement>
+
+type MakeLinkOptions<
+  TAllRouteInfo extends AnyAllRouteInfo,
+  TFrom extends ValidFromPath<TAllRouteInfo>,
+  TTo extends string,
+> = LinkPropsOptions<TAllRouteInfo, TFrom, TTo> &
+  React.AnchorHTMLAttributes<HTMLAnchorElement> &
+  Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, 'children'> & {
+    // If a function is passed as a child, it will be given the `isActive` boolean to aid in further styling on the element it returns
+    children?:
+      | React.ReactNode
+      | ((state: { isActive: boolean }) => React.ReactNode)
+  }
+
 declare module '@tanstack/router-core' {
   interface FrameworkGenerics {
-    Element: React.ReactNode
-    // Any is required here so import() will work without having to do import().then(d => d.default)
-    SyncOrAsyncElement: React.ReactNode | (() => Promise<any>)
+    Component: RouteComponent
+    ErrorComponent: RouteComponent<{
+      error: unknown
+      info: { componentStack: string }
+    }>
+  }
+
+  interface RouterOptions<TRouteConfig, TRouterContext> {
+    // ssrFooter?: () => JSX.Element | React.ReactNode
   }
 
   interface Router<
@@ -50,36 +150,26 @@ declare module '@tanstack/router-core' {
     useRoute: <TId extends keyof TAllRouteInfo['routeInfoById']>(
       routeId: TId,
     ) => Route<TAllRouteInfo, TAllRouteInfo['routeInfoById'][TId]>
-    useMatch: <TId extends keyof TAllRouteInfo['routeInfoById']>(
+    useNearestMatch: () => RouteMatch<TAllRouteInfo, RouteInfo>
+    useMatch: <
+      TId extends keyof TAllRouteInfo['routeInfoById'],
+      TStrict extends boolean = true,
+    >(
       routeId: TId,
-    ) => RouteMatch<TAllRouteInfo, TAllRouteInfo['routeInfoById'][TId]>
+      opts?: { strict?: TStrict },
+    ) => TStrict extends true
+      ? RouteMatch<TAllRouteInfo, TAllRouteInfo['routeInfoById'][TId]>
+      :
+          | RouteMatch<TAllRouteInfo, TAllRouteInfo['routeInfoById'][TId]>
+          | undefined
     linkProps: <TTo extends string = '.'>(
-      props: LinkPropsOptions<TAllRouteInfo, '/', TTo> &
-        React.AnchorHTMLAttributes<HTMLAnchorElement>,
+      props: MakeLinkPropsOptions<TAllRouteInfo, '/', TTo>,
     ) => React.AnchorHTMLAttributes<HTMLAnchorElement>
     Link: <TTo extends string = '.'>(
-      props: LinkPropsOptions<TAllRouteInfo, '/', TTo> &
-        React.AnchorHTMLAttributes<HTMLAnchorElement> &
-        Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, 'children'> & {
-          // If a function is passed as a child, it will be given the `isActive` boolean to aid in further styling on the element it returns
-          children?:
-            | React.ReactNode
-            | ((state: { isActive: boolean }) => React.ReactNode)
-        },
+      props: MakeLinkOptions<TAllRouteInfo, '/', TTo>,
     ) => JSX.Element
     MatchRoute: <TTo extends string = '.'>(
-      props: ToOptions<TAllRouteInfo, '/', TTo> &
-        MatchRouteOptions & {
-          // If a function is passed as a child, it will be given the `isActive` boolean to aid in further styling on the element it returns
-          children?:
-            | React.ReactNode
-            | ((
-                params: RouteInfoByPath<
-                  TAllRouteInfo,
-                  ResolveRelativePath<'/', NoInfer<TTo>>
-                >['allParams'],
-              ) => React.ReactNode)
-        },
+      props: MakeMatchRouteOptions<TAllRouteInfo, '/', TTo>,
     ) => JSX.Element
   }
 
@@ -99,53 +189,20 @@ declare module '@tanstack/router-core' {
         TResolved,
         ToIdOption<TAllRouteInfo, TRouteInfo['id'], TTo>
       >,
+      opts?: { strict?: boolean },
     ) => Route<TAllRouteInfo, TAllRouteInfo['routeInfoById'][TResolved]>
     linkProps: <TTo extends string = '.'>(
-      props: LinkPropsOptions<TAllRouteInfo, TRouteInfo['fullPath'], TTo> &
-        React.AnchorHTMLAttributes<HTMLAnchorElement>,
+      props: MakeLinkPropsOptions<TAllRouteInfo, TRouteInfo['fullPath'], TTo>,
     ) => React.AnchorHTMLAttributes<HTMLAnchorElement>
     Link: <TTo extends string = '.'>(
-      props: LinkPropsOptions<TAllRouteInfo, TRouteInfo['fullPath'], TTo> &
-        React.AnchorHTMLAttributes<HTMLAnchorElement> &
-        Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, 'children'> & {
-          // If a function is passed as a child, it will be given the `isActive` boolean to aid in further styling on the element it returns
-          children?:
-            | React.ReactNode
-            | ((state: { isActive: boolean }) => React.ReactNode)
-        },
+      props: MakeLinkOptions<TAllRouteInfo, TRouteInfo['fullPath'], TTo>,
     ) => JSX.Element
     MatchRoute: <TTo extends string = '.'>(
-      props: ToOptions<TAllRouteInfo, TRouteInfo['fullPath'], TTo> &
-        MatchRouteOptions & {
-          // If a function is passed as a child, it will be given the `isActive` boolean to aid in further styling on the element it returns
-          children?:
-            | React.ReactNode
-            | ((
-                params: RouteInfoByPath<
-                  TAllRouteInfo,
-                  ResolveRelativePath<TRouteInfo['fullPath'], NoInfer<TTo>>
-                >['allParams'],
-              ) => React.ReactNode)
-        },
+      props: MakeMatchRouteOptions<TAllRouteInfo, TRouteInfo['fullPath'], TTo>,
     ) => JSX.Element
   }
 }
 
-type LinkPropsOptions<
-  TAllRouteInfo extends AnyAllRouteInfo = DefaultAllRouteInfo,
-  TFrom extends ValidFromPath<TAllRouteInfo> = '/',
-  TTo extends string = '.',
-> = LinkOptions<TAllRouteInfo, TFrom, TTo> & {
-  // A function that returns additional props for the `active` state of this link. These props override other props passed to the link (`style`'s are merged, `className`'s are concatenated)
-  activeProps?:
-    | React.AnchorHTMLAttributes<HTMLAnchorElement>
-    | (() => React.AnchorHTMLAttributes<HTMLAnchorElement>)
-  // A function that returns additional props for the `inactive` state of this link. These props override other props passed to the link (`style`'s are merged, `className`'s are concatenated)
-  inactiveProps?:
-    | React.AnchorHTMLAttributes<HTMLAnchorElement>
-    | (() => React.AnchorHTMLAttributes<HTMLAnchorElement>)
-}
-
 export type PromptProps = {
   message: string
   when?: boolean | any
@@ -154,20 +211,22 @@ export type PromptProps = {
 
 //
 
-const matchesContext = React.createContext<RouteMatch[]>(null!)
-const routerContext = React.createContext<{ router: Router<any, any> }>(null!)
+export function Link<TTo extends string = '.'>(
+  props: MakeLinkOptions<RegisteredAllRouteInfo, '/', TTo>,
+): JSX.Element {
+  const router = useRouter()
+  return <router.Link {...(props as any)} />
+}
 
-// Detect if we're in the DOM
-const isDOM = Boolean(
-  typeof window !== 'undefined' &&
-    window.document &&
-    window.document.createElement,
-)
+type MatchesContextValue = RouteMatch[]
 
-const useLayoutEffect = isDOM ? React.useLayoutEffect : React.useEffect
+export const matchesContext = React.createContext<MatchesContextValue>(null!)
+export const routerContext = React.createContext<{ router: RegisteredRouter }>(
+  null!,
+)
 
 export type MatchesProviderProps = {
-  value: RouteMatch[]
+  value: MatchesContextValue
   children: React.ReactNode
 }
 
@@ -175,7 +234,7 @@ export function MatchesProvider(props: MatchesProviderProps) {
   return <matchesContext.Provider {...props} />
 }
 
-const useRouterSubscription = (router: Router<any, any>) => {
+const useRouterSubscription = (router: Router<any, any, any>) => {
   useSyncExternalStore(
     (cb) => router.subscribe(() => cb()),
     () => router.state,
@@ -185,10 +244,14 @@ const useRouterSubscription = (router: Router<any, any>) => {
 
 export function createReactRouter<
   TRouteConfig extends AnyRouteConfig = RouteConfig,
->(opts: RouterOptions<TRouteConfig>): Router<TRouteConfig> {
+  TAllRouteInfo extends AnyAllRouteInfo = AllRouteInfo<TRouteConfig>,
+  TRouterContext = unknown,
+>(
+  opts: RouterOptions<TRouteConfig, TRouterContext>,
+): Router<TRouteConfig, TAllRouteInfo, TRouterContext> {
   const makeRouteExt = (
     route: AnyRoute,
-    router: Router<any, any>,
+    router: Router<any, any, any>,
   ): Pick<AnyRoute, 'useRoute' | 'linkProps' | 'Link' | 'MatchRoute'> => {
     return {
       useRoute: (subRouteId = '.' as any) => {
@@ -237,7 +300,7 @@ export function createReactRouter<
           ...rest
         } = options
 
-        const linkInfo = route.buildLink(options)
+        const linkInfo = route.buildLink(options as any)
 
         if (linkInfo.type === 'external') {
           const { href } = linkInfo
@@ -253,6 +316,15 @@ export function createReactRouter<
           next,
         } = linkInfo
 
+        const reactHandleClick = (e: Event) => {
+          if (React.startTransition)
+            // This is a hack for react < 18
+            React.startTransition(() => {
+              handleClick(e)
+            })
+          else handleClick(e)
+        }
+
         const composeHandlers =
           (handlers: (undefined | ((e: any) => void))[]) =>
           (e: React.SyntheticEvent) => {
@@ -275,7 +347,7 @@ export function createReactRouter<
           ...resolvedInactiveProps,
           ...rest,
           href: disabled ? undefined : next.href,
-          onClick: composeHandlers([handleClick, onClick]),
+          onClick: composeHandlers([reactHandleClick, onClick]),
           onFocus: composeHandlers([handleFocus, onFocus]),
           onMouseEnter: composeHandlers([handleEnter, onMouseEnter]),
           onMouseLeave: composeHandlers([handleLeave, onMouseLeave]),
@@ -344,12 +416,12 @@ export function createReactRouter<
   const coreRouter = createRouter<TRouteConfig>({
     ...opts,
     createRouter: (router) => {
-      const routerExt: Pick<Router<any, any>, 'useMatch' | 'useState'> = {
+      const routerExt: Pick<Router<any, any, any>, 'useMatch' | 'useState'> = {
         useState: () => {
           useRouterSubscription(router)
           return router.state
         },
-        useMatch: (routeId) => {
+        useMatch: (routeId, opts) => {
           useRouterSubscription(router)
 
           invariant(
@@ -357,36 +429,34 @@ export function createReactRouter<
             `"${rootRouteId}" cannot be used with useMatch! Did you mean to useRoute("${rootRouteId}")?`,
           )
 
-          const runtimeMatch = useMatch()
+          const nearestMatch = useNearestMatch()
           const match = router.state.matches.find((d) => d.routeId === routeId)
 
-          invariant(
-            match,
-            `Could not find a match for route "${
-              routeId as string
-            }" being rendered in this component!`,
-          )
-
-          invariant(
-            runtimeMatch.routeId == match?.routeId,
-            `useMatch('${
-              match?.routeId as string
-            }') is being called in a component that is meant to render the '${
-              runtimeMatch.routeId
-            }' route. Did you mean to 'useRoute(${
-              match?.routeId as string
-            })' instead?`,
-          )
-
-          if (!match) {
-            invariant('Match not found!')
+          if (opts?.strict ?? true) {
+            invariant(
+              match,
+              `Could not find an active match for "${routeId as string}"!`,
+            )
+
+            invariant(
+              nearestMatch.routeId == match?.routeId,
+              `useMatch("${
+                match?.routeId as string
+              }") is being called in a component that is meant to render the '${
+                nearestMatch.routeId
+              }' route. Did you mean to 'useMatch("${
+                match?.routeId as string
+              }", { strict: false })' or 'useRoute("${
+                match?.routeId as string
+              }")' instead?`,
+            )
           }
 
-          return match
+          return match as any
         },
       }
 
-      const routeExt = makeRouteExt(router.getRoute('/'), router)
+      const routeExt = makeRouteExt(router.getRoute(rootRouteId), router)
 
       Object.assign(router, routerExt, routeExt)
     },
@@ -395,19 +465,13 @@ export function createReactRouter<
 
       Object.assign(route, routeExt)
     },
-    createElement: async (element) => {
-      if (typeof element === 'function') {
-        const res = (await element()) as any
-
-        // Support direct import() calls
-        if (typeof res === 'object' && res.default) {
-          return React.createElement(res.default)
-        } else {
-          return res
-        }
+    loadComponent: async (component) => {
+      if (component.preload && typeof document !== 'undefined') {
+        component.preload()
+        // return await component.preload()
       }
 
-      return element
+      return component as any
     },
   })
 
@@ -417,125 +481,184 @@ export function createReactRouter<
 export type RouterProps<
   TRouteConfig extends AnyRouteConfig = RouteConfig,
   TAllRouteInfo extends AnyAllRouteInfo = DefaultAllRouteInfo,
-> = RouterOptions<TRouteConfig> & {
-  router: Router<TRouteConfig, TAllRouteInfo>
-  // Children will default to `<Outlet />` if not provided
-  children?: React.ReactNode
+  TRouterContext = unknown,
+> = RouterOptions<TRouteConfig, TRouterContext> & {
+  router: Router<TRouteConfig, TAllRouteInfo, TRouterContext>
 }
 
 export function RouterProvider<
   TRouteConfig extends AnyRouteConfig = RouteConfig,
   TAllRouteInfo extends AnyAllRouteInfo = DefaultAllRouteInfo,
->({ children, router, ...rest }: RouterProps<TRouteConfig, TAllRouteInfo>) {
+  TRouterContext = unknown,
+>({
+  router,
+  ...rest
+}: RouterProps<TRouteConfig, TAllRouteInfo, TRouterContext>) {
   router.update(rest)
 
   useRouterSubscription(router)
-
-  useLayoutEffect(() => {
+  React.useEffect(() => {
     return router.mount()
   }, [router])
 
   return (
-    <routerContext.Provider value={{ router }}>
-      <MatchesProvider value={router.state.matches}>
-        {children ?? <Outlet />}
-      </MatchesProvider>
-    </routerContext.Provider>
+    <>
+      <routerContext.Provider value={{ router: router as any }}>
+        <MatchesProvider value={[undefined!, ...router.state.matches]}>
+          <Outlet />
+        </MatchesProvider>
+      </routerContext.Provider>
+    </>
   )
 }
 
-function useRouter(): Router {
+export function useRouter(): RegisteredRouter {
   const value = React.useContext(routerContext)
   warning(!value, 'useRouter must be used inside a <Router> component!')
 
   useRouterSubscription(value.router)
 
-  return value.router as Router
+  return value.router
 }
 
-function useMatches(): RouteMatch[] {
+export function useMatches(): RouteMatch[] {
   return React.useContext(matchesContext)
 }
 
-// function useParentMatches(): RouteMatch[] {
-//   const router = useRouter()
-//   const match = useMatch()
-//   const matches = router.state.matches
-//   return matches.slice(
-//     0,
-//     matches.findIndex((d) => d.matchId === match.matchId) - 1,
-//   )
-// }
-
-function useMatch<T>(): RouteMatch {
-  return useMatches()?.[0] as RouteMatch
-}
-
-export function Outlet() {
+export function useMatch<
+  TId extends keyof RegisteredAllRouteInfo['routeInfoById'],
+  TStrict extends boolean = true,
+>(
+  routeId: TId,
+  opts?: { strict?: TStrict },
+): TStrict extends true
+  ? RouteMatch<
+      RegisteredAllRouteInfo,
+      RegisteredAllRouteInfo['routeInfoById'][TId]
+    >
+  :
+      | RouteMatch<
+          RegisteredAllRouteInfo,
+          RegisteredAllRouteInfo['routeInfoById'][TId]
+        >
+      | undefined {
   const router = useRouter()
-  const [, ...matches] = useMatches()
+  return router.useMatch(routeId as any, opts) as any
+}
 
-  const childMatch = matches[0]
+export function useNearestMatch(): RouteMatch<
+  RegisteredAllRouteInfo,
+  RouteInfo
+> {
+  const runtimeMatch = useMatches()[0]
 
-  if (!childMatch) return null
+  invariant(runtimeMatch, `Could not find a nearest match!`)
 
-  const element = ((): React.ReactNode => {
-    if (!childMatch) {
-      return null
-    }
+  return runtimeMatch as any
+}
 
-    const errorElement =
-      childMatch.__.errorElement ?? router.options.defaultErrorElement
+export function useRoute<
+  TId extends keyof RegisteredAllRouteInfo['routeInfoById'],
+>(
+  routeId: TId,
+): Route<RegisteredAllRouteInfo, RegisteredAllRouteInfo['routeInfoById'][TId]> {
+  const router = useRouter()
+  return router.useRoute(routeId as any) as any
+}
 
-    if (childMatch.status === 'error') {
-      if (errorElement) {
-        return errorElement as any
-      }
+export function useSearch<
+  TId extends keyof RegisteredAllRouteInfo['routeInfoById'] = keyof RegisteredAllRouteInfo['routeInfoById'],
+>(_routeId?: TId): RegisteredAllRouteInfo['fullSearchSchema'] {
+  return useRouter().state.location.search
+}
 
-      if (
-        childMatch.options.useErrorBoundary ||
-        router.options.useErrorBoundary
-      ) {
-        throw childMatch.error
-      }
+export function linkProps<TTo extends string = '.'>(
+  props: MakeLinkPropsOptions<RegisteredAllRouteInfo, '/', TTo>,
+): React.AnchorHTMLAttributes<HTMLAnchorElement> {
+  const router = useRouter()
+  return router.linkProps(props as any)
+}
 
-      return <DefaultErrorBoundary error={childMatch.error} />
-    }
+export function MatchRoute<TTo extends string = '.'>(
+  props: MakeMatchRouteOptions<RegisteredAllRouteInfo, '/', TTo>,
+): JSX.Element {
+  const router = useRouter()
+  return React.createElement(router.MatchRoute, props as any)
+}
 
-    if (childMatch.status === 'loading' || childMatch.status === 'idle') {
-      if (childMatch.isPending) {
-        const pendingElement =
-          childMatch.__.pendingElement ?? router.options.defaultPendingElement
+export function Outlet() {
+  const router = useRouter()
+  const matches = useMatches().slice(1)
+  const match = matches[0]
 
-        if (childMatch.options.pendingMs || pendingElement) {
-          return (pendingElement as any) ?? null
-        }
-      }
+  const defaultPending = React.useCallback(() => null, [])
 
-      return null
-    }
+  if (!match) {
+    return null
+  }
 
-    return (childMatch.__.element as any) ?? router.options.defaultElement
-  })() as JSX.Element
+  const PendingComponent = (match.__.pendingComponent ??
+    router.options.defaultPendingComponent ??
+    defaultPending) as any
 
-  const catchElement =
-    childMatch?.options.catchElement ?? router.options.defaultCatchElement
+  const errorComponent =
+    match.__.errorComponent ?? router.options.defaultErrorComponent
 
   return (
-    <MatchesProvider value={matches} key={childMatch.matchId}>
-      <CatchBoundary catchElement={catchElement}>{element}</CatchBoundary>
+    <MatchesProvider value={matches}>
+      <React.Suspense fallback={<PendingComponent />}>
+        <CatchBoundary
+          key={match.routeId}
+          errorComponent={errorComponent}
+          match={match as any}
+        >
+          {
+            ((): React.ReactNode => {
+              if (match.status === 'error') {
+                throw match.error
+              }
+
+              if (match.status === 'success') {
+                return React.createElement(
+                  (match.__.component as any) ??
+                    router.options.defaultComponent ??
+                    Outlet,
+                )
+              }
+              throw match.__.loadPromise
+            })() as JSX.Element
+          }
+        </CatchBoundary>
+      </React.Suspense>
+      {/* Provide a suffix suspense boundary to make sure the router is
+  ready to be dehydrated on the server */}
+      {/* {router.options.ssrFooter && match.matchId === rootRouteId ? (
+        <React.Suspense fallback={null}>
+          {(() => {
+            if (router.state.pending) {
+              throw router.navigationPromise
+            }
+
+            return router.options.ssrFooter()
+          })()}
+        </React.Suspense>
+      ) : null} */}
     </MatchesProvider>
   )
 }
 
 class CatchBoundary extends React.Component<{
   children: any
-  catchElement: any
+  errorComponent: any
+  match: RouteMatch
 }> {
   state = {
     error: false,
+    info: undefined,
   }
+
   componentDidCatch(error: any, info: any) {
+    console.error(`Error in route match: ${this.props.match.matchId}`)
     console.error(error)
 
     this.setState({
@@ -543,23 +666,59 @@ class CatchBoundary extends React.Component<{
       info,
     })
   }
-  reset = () => {
-    this.setState({
-      error: false,
-      info: false,
-    })
-  }
+
   render() {
-    const catchElement = this.props.catchElement ?? DefaultErrorBoundary
+    return (
+      <CatchBoundaryInner
+        {...this.props}
+        errorState={this.state}
+        reset={() => this.setState({})}
+      />
+    )
+  }
+}
+
+// This is the messiest thing ever... I'm either seriously tired (likely) or
+// there has to be a better way to reset error boundaries when the
+// router's location key changes.
+function CatchBoundaryInner(props: {
+  children: any
+  errorComponent: any
+  errorState: { error: unknown; info: any }
+  reset: () => void
+}) {
+  const [activeErrorState, setActiveErrorState] = React.useState(
+    props.errorState,
+  )
+  const router = useRouter()
+  const errorComponent = props.errorComponent ?? DefaultErrorBoundary
+
+  React.useEffect(() => {
+    if (activeErrorState) {
+      let prevKey = router.state.location.key
+      return router.subscribe(() => {
+        if (router.state.location.key !== prevKey) {
+          prevKey = router.state.location.key
+          setActiveErrorState({} as any)
+        }
+      })
+    }
+
+    return
+  }, [activeErrorState])
 
-    if (this.state.error) {
-      return typeof catchElement === 'function'
-        ? catchElement(this.state)
-        : catchElement
+  React.useEffect(() => {
+    if (props.errorState.error) {
+      setActiveErrorState(props.errorState)
     }
+    props.reset()
+  }, [props.errorState.error])
 
-    return this.props.children
+  if (activeErrorState.error) {
+    return React.createElement(errorComponent, activeErrorState)
   }
+
+  return props.children
 }
 
 export function DefaultErrorBoundary({ error }: { error: any }) {
@@ -584,19 +743,6 @@ export function DefaultErrorBoundary({ error }: { error: any }) {
           ) : null}
         </pre>
       </div>
-      <div style={{ height: '1rem' }} />
-      <div
-        style={{
-          fontSize: '.8em',
-          borderLeft: '3px solid rgba(127, 127, 127, 1)',
-          paddingLeft: '.5rem',
-          opacity: 0.5,
-        }}
-      >
-        If you are the owner of this website, it's highly recommended that you
-        configure your own custom Catch/Error boundaries for the router. You can
-        optionally configure a boundary for each route.
-      </div>
     </div>
   )
 }