react-router 6.5.0 → 6.6.0

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # `react-router`
 
+## 6.6.0
+
+### Patch Changes
+
+- Prevent `useLoaderData` usage in `errorElement` ([#9735](https://github.com/remix-run/react-router/pull/9735))
+- Updated dependencies:
+  - `@remix-run/router@1.2.0`
+
 ## 6.5.0
 
 This 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.

package/dist/index.js

@@ -1,5 +1,5 @@
 /**
- * React Router v6.5.0
+ * React Router v6.6.0
  *
  * Copyright (c) Remix Software Inc.
  *
@@ -644,10 +644,12 @@ class RenderErrorBoundary extends React.Component {
   }
 
   render() {
-    return this.state.error ? /*#__PURE__*/React.createElement(RouteErrorContext.Provider, {
+    return this.state.error ? /*#__PURE__*/React.createElement(RouteContext.Provider, {
+      value: this.props.routeContext
+    }, /*#__PURE__*/React.createElement(RouteErrorContext.Provider, {
       value: this.state.error,
       children: this.props.component
-    }) : this.props.children;
+    })) : this.props.children;
   }
 
 }
@@ -699,12 +701,13 @@ function _renderMatches(matches, parentMatches, dataRouterState) {
     let error = match.route.id ? errors == null ? void 0 : errors[match.route.id] : null; // Only data routers handle errors
 
     let errorElement = dataRouterState ? match.route.errorElement || /*#__PURE__*/React.createElement(DefaultErrorElement, null) : null;
+    let matches = parentMatches.concat(renderedMatches.slice(0, index + 1));
 
     let getChildren = () => /*#__PURE__*/React.createElement(RenderedRoute, {
       match: match,
       routeContext: {
         outlet,
-        matches: parentMatches.concat(renderedMatches.slice(0, index + 1))
+        matches
       }
     }, error ? errorElement : match.route.element !== undefined ? match.route.element : outlet); // Only wrap in an error boundary within data router usages when we have an
     // errorElement on this route.  Otherwise let it bubble up to an ancestor
@@ -715,7 +718,11 @@ function _renderMatches(matches, parentMatches, dataRouterState) {
       location: dataRouterState.location,
       component: errorElement,
       error: error,
-      children: getChildren()
+      children: getChildren(),
+      routeContext: {
+        outlet: null,
+        matches
+      }
     }) : getChildren();
   }, null);
 }
@@ -752,6 +759,19 @@ function useDataRouterState(hookName) {
   !state ? process.env.NODE_ENV !== "production" ? invariant(false, getDataRouterConsoleError(hookName)) : invariant(false) : void 0;
   return state;
 }
+
+function useRouteContext(hookName) {
+  let route = React.useContext(RouteContext);
+  !route ? process.env.NODE_ENV !== "production" ? invariant(false, getDataRouterConsoleError(hookName)) : invariant(false) : void 0;
+  return route;
+}
+
+function useCurrentRouteId(hookName) {
+  let route = useRouteContext(hookName);
+  let thisRoute = route.matches[route.matches.length - 1];
+  !thisRoute.route.id ? process.env.NODE_ENV !== "production" ? invariant(false, hookName + " can only be used on routes that contain a unique \"id\"") : invariant(false) : void 0;
+  return thisRoute.route.id;
+}
 /**
  * Returns the current navigation, defaulting to an "idle" navigation when
  * no navigation is in progress
@@ -808,11 +828,14 @@ function useMatches() {
 
 function useLoaderData() {
   let state = useDataRouterState(DataRouterStateHook.UseLoaderData);
-  let route = React.useContext(RouteContext);
-  !route ? process.env.NODE_ENV !== "production" ? invariant(false, "useLoaderData must be used inside a RouteContext") : invariant(false) : void 0;
-  let thisRoute = route.matches[route.matches.length - 1];
-  !thisRoute.route.id ? process.env.NODE_ENV !== "production" ? invariant(false, "useLoaderData can only be used on routes that contain a unique \"id\"") : invariant(false) : void 0;
-  return state.loaderData[thisRoute.route.id];
+  let routeId = useCurrentRouteId(DataRouterStateHook.UseLoaderData);
+
+  if (state.errors && state.errors[routeId] != null) {
+    console.error("You cannot `useLoaderData` in an errorElement (routeId: " + routeId + ")");
+    return undefined;
+  }
+
+  return state.loaderData[routeId];
 }
 /**
  * Returns the loaderData for the given routeId
@@ -843,18 +866,15 @@ function useRouteError() {
 
   let error = React.useContext(RouteErrorContext);
   let state = useDataRouterState(DataRouterStateHook.UseRouteError);
-  let route = React.useContext(RouteContext);
-  let thisRoute = route.matches[route.matches.length - 1]; // If this was a render error, we put it in a RouteError context inside
+  let routeId = useCurrentRouteId(DataRouterStateHook.UseRouteError); // If this was a render error, we put it in a RouteError context inside
   // of RenderErrorBoundary
 
   if (error) {
     return error;
-  }
+  } // Otherwise look for errors from our data router state
 
-  !route ? process.env.NODE_ENV !== "production" ? invariant(false, "useRouteError must be used inside a RouteContext") : invariant(false) : void 0;
-  !thisRoute.route.id ? process.env.NODE_ENV !== "production" ? invariant(false, "useRouteError can only be used on routes that contain a unique \"id\"") : invariant(false) : void 0; // Otherwise look for errors from our data router state
 
-  return (_state$errors = state.errors) == null ? void 0 : _state$errors[thisRoute.route.id];
+  return (_state$errors = state.errors) == null ? void 0 : _state$errors[routeId];
 }
 /**
  * Returns the happy-path data from the nearest ancestor <Await /> value