bye bye RemixRoute and RemixRouteError

remix-run · Aug 17, 2023 · a543449 · a543449
1 parent 12bb75c
commit a543449
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 74 deletions.
diff --git a/packages/remix-react/components.tsx b/packages/remix-react/components.tsx
@@ -82,67 +82,6 @@ function useRemixContext(): RemixContextObject {
   return context;
 }
 
-////////////////////////////////////////////////////////////////////////////////
-// RemixRoute
-
-// TODO: Can this go away entirely in hopes of dropping routeModules?  If we
-// just leverage Component - React Router will fallback on the Outlet.  We'll
-// just lose some of this error messaging.
-
-export function RemixRoute({ id }: { id: string }) {
-  let { routeModules } = useRemixContext();
-
-  invariant(
-    routeModules,
-    "Cannot initialize 'routeModules'. This normally occurs when you have server code in your client modules.\n" +
-      "Check this link for more details:\nhttps://remix.run/pages/gotchas#server-code-in-client-bundles"
-  );
-
-  let { default: Component, ErrorBoundary } = routeModules[id];
-
-  // Default Component to Outlet if we expose boundary UI components
-  if (!Component && ErrorBoundary) {
-    Component = Outlet;
-  }
-
-  invariant(
-    Component,
-    `Route "${id}" has no component! Please go add a \`default\` export in the route module file.\n` +
-      "If you were trying to navigate or submit to a resource route, use `<a>` instead of `<Link>` or `<Form reloadDocument>`."
-  );
-
-  return <Component />;
-}
-
-// TODO: Can this go away entirely in hopes of dropping routeModules?  Critical
-// path routes may just be able to be defined as follows on initial hydration?
-// ErrorBoundary:
-//   route.ErrorBoundary ||
-//   route.id === "root" ?
-//     () => <RemixRootDefaultErrorBoundary error={useRouteError()} /> :
-//     null
-
-export function RemixRouteError({ id }: { id: string }) {
-  let { routeModules } = useRemixContext();
-
-  // This checks prevent cryptic error messages such as: 'Cannot read properties of undefined (reading 'root')'
-  invariant(
-    routeModules,
-    "Cannot initialize 'routeModules'. This normally occurs when you have server code in your client modules.\n" +
-      "Check this link for more details:\nhttps://remix.run/pages/gotchas#server-code-in-client-bundles"
-  );
-
-  let error = useRouteError();
-  let { ErrorBoundary } = routeModules[id];
-
-  if (ErrorBoundary) {
-    return <ErrorBoundary />;
-  } else if (id === "root") {
-    return <RemixRootDefaultErrorBoundary error={error} />;
-  }
-
-  throw error;
-}
 ////////////////////////////////////////////////////////////////////////////////
 // Public API
 

diff --git a/packages/remix-react/routes.tsx b/packages/remix-react/routes.tsx
@@ -16,7 +16,6 @@ import {
 } from "./data";
 import type { FutureConfig } from "./entry";
 import { prefetchStyleLinks } from "./links";
-import { RemixRoute, RemixRouteError } from "./components";
 import { RemixRootDefaultErrorBoundary } from "./errorBoundaries";
 
 export interface RouteManifest<Route> {
@@ -69,13 +68,15 @@ export function createServerRoutes(
   > = groupRoutesByParentId(manifest)
 ): DataRouteObject[] {
   return (routesByParentId[parentId] || []).map((route) => {
+    let routeModule = routeModules[route.id];
     let dataRoute: DataRouteObject = {
       caseSensitive: route.caseSensitive,
-      element: <RemixRoute id={route.id} />,
-      errorElement:
-        route.id === "root" || route.hasErrorBoundary ? (
-          <RemixRouteError id={route.id} />
-        ) : undefined,
+      Component: routeModule.default,
+      ErrorBoundary: routeModule.ErrorBoundary
+        ? routeModule.ErrorBoundary
+        : route.id === "root"
+        ? () => <RemixRootDefaultErrorBoundary error={useRouteError()} />
+        : undefined,
       id: route.id,
       index: route.index,
       path: route.path,
@@ -126,7 +127,6 @@ export function createClientRoutes(
   return (routesByParentId[parentId] || []).map((route) => {
     let routeModule = routeModulesCache?.[route.id];
     let dataRoute: DataRouteObject = {
-      caseSensitive: route.caseSensitive,
       id: route.id,
       index: route.index,
       path: route.path,
@@ -152,7 +152,7 @@ export function createClientRoutes(
             ErrorBoundary: routeModule.ErrorBoundary
               ? routeModule.ErrorBoundary
               : route.id === "root"
-              ? RootDefaultErrorBoundary
+              ? () => <RemixRootDefaultErrorBoundary error={useRouteError()} />
               : undefined,
             handle: routeModule.handle,
             shouldRevalidate: needsRevalidation
@@ -215,11 +215,6 @@ function wrapShouldRevalidateForHdr(
   };
 }
 
-function RootDefaultErrorBoundary() {
-  let error = useRouteError();
-  return <RemixRootDefaultErrorBoundary error={error} />;
-}
-
 async function loadRouteModuleWithBlockingLinks(
   route: EntryRoute,
   routeModules: RouteModules