react-router 6.4.1 → 6.4.2-pre.0

package/CHANGELOG.md

@@ -1,5 +1,15 @@
 # `react-router`
 
+## 6.4.2-pre.0
+
+### Patch Changes
+
+- fix: throw error when receiving invalid path object ([#9375](https://github.com/remix-run/react-router/pull/9375))
+- docs: Enhance console error messages for invalid usage of data router hooks ([#9311](https://github.com/remix-run/react-router/pull/9311))
+- fix: Strengthen `RouteObject`/`RouteProps` types and throw on `index` routes with `children` ([#9366](https://github.com/remix-run/react-router/pull/9366))
+- Updated dependencies:
+  - `@remix-run/router@1.0.2-pre.0`
+
 ## 6.4.1
 
 ### Patch Changes

package/dist/index.d.ts

@@ -2,14 +2,14 @@ import type { ActionFunction, ActionFunctionArgs, Fetcher, HydrationState, JsonF
 import { AbortedDeferredError, Action as NavigationType, createPath, defer, generatePath, isRouteErrorResponse, json, matchPath, matchRoutes, parsePath, redirect, resolvePath } from "@remix-run/router";
 import type { AwaitProps, MemoryRouterProps, NavigateProps, OutletProps, RouteProps, PathRouteProps, LayoutRouteProps, IndexRouteProps, RouterProps, RoutesProps, RouterProviderProps } from "./lib/components";
 import { enhanceManualRouteObjects, createRoutesFromChildren, renderMatches, Await, MemoryRouter, Navigate, Outlet, Route, Router, RouterProvider, Routes } from "./lib/components";
-import type { DataRouteMatch, DataRouteObject, Navigator, NavigateOptions, RouteMatch, RouteObject, RelativeRoutingType } from "./lib/context";
+import type { DataRouteMatch, DataRouteObject, IndexRouteObject, Navigator, NavigateOptions, NonIndexRouteObject, RouteMatch, RouteObject, RelativeRoutingType } from "./lib/context";
 import { DataRouterContext, DataRouterStateContext, DataStaticRouterContext, LocationContext, NavigationContext, RouteContext } from "./lib/context";
 import type { NavigateFunction } from "./lib/hooks";
 import { useHref, useInRouterContext, useLocation, useMatch, useNavigationType, useNavigate, useOutlet, useOutletContext, useParams, useResolvedPath, useRoutes, useActionData, useAsyncError, useAsyncValue, useLoaderData, useMatches, useNavigation, useRevalidator, useRouteError, useRouteLoaderData } from "./lib/hooks";
 declare type Hash = string;
 declare type Pathname = string;
 declare type Search = string;
-export type { ActionFunction, ActionFunctionArgs, AwaitProps, DataRouteMatch, DataRouteObject, Fetcher, Hash, IndexRouteProps, JsonFunction, LayoutRouteProps, LoaderFunction, LoaderFunctionArgs, Location, MemoryRouterProps, NavigateFunction, NavigateOptions, NavigateProps, Navigation, Navigator, OutletProps, Params, ParamParseKey, Path, PathMatch, Pathname, PathPattern, PathRouteProps, RedirectFunction, RelativeRoutingType, RouteMatch, RouteObject, RouteProps, RouterProps, RouterProviderProps, RoutesProps, Search, ShouldRevalidateFunction, To, };
+export type { ActionFunction, ActionFunctionArgs, AwaitProps, DataRouteMatch, DataRouteObject, Fetcher, Hash, IndexRouteObject, IndexRouteProps, JsonFunction, LayoutRouteProps, LoaderFunction, LoaderFunctionArgs, Location, MemoryRouterProps, NavigateFunction, NavigateOptions, NavigateProps, Navigation, Navigator, NonIndexRouteObject, OutletProps, Params, ParamParseKey, Path, PathMatch, Pathname, PathPattern, PathRouteProps, RedirectFunction, RelativeRoutingType, RouteMatch, RouteObject, RouteProps, RouterProps, RouterProviderProps, RoutesProps, Search, ShouldRevalidateFunction, To, };
 export { AbortedDeferredError, Await, MemoryRouter, Navigate, NavigationType, Outlet, Route, Router, RouterProvider, Routes, createPath, createRoutesFromChildren, createRoutesFromChildren as createRoutesFromElements, defer, isRouteErrorResponse, generatePath, json, matchPath, matchRoutes, parsePath, redirect, renderMatches, resolvePath, useActionData, useAsyncError, useAsyncValue, useHref, useInRouterContext, useLoaderData, useLocation, useMatch, useMatches, useNavigate, useNavigation, useNavigationType, useOutlet, useOutletContext, useParams, useResolvedPath, useRevalidator, useRouteError, useRouteLoaderData, useRoutes, };
 export declare function createMemoryRouter(routes: RouteObject[], opts?: {
     basename?: string;

package/dist/index.js

@@ -1,5 +1,5 @@
 /**
- * React Router v6.4.1
+ * React Router v6.4.2-pre.0
  *
  * Copyright (c) Remix Software Inc.
  *
@@ -743,18 +743,34 @@ function _renderMatches(matches, parentMatches, dataRouterState) {
 var DataRouterHook;
 
 (function (DataRouterHook) {
-  DataRouterHook["UseLoaderData"] = "useLoaderData";
-  DataRouterHook["UseActionData"] = "useActionData";
-  DataRouterHook["UseRouteError"] = "useRouteError";
-  DataRouterHook["UseNavigation"] = "useNavigation";
-  DataRouterHook["UseRouteLoaderData"] = "useRouteLoaderData";
-  DataRouterHook["UseMatches"] = "useMatches";
   DataRouterHook["UseRevalidator"] = "useRevalidator";
 })(DataRouterHook || (DataRouterHook = {}));
 
+var DataRouterStateHook;
+
+(function (DataRouterStateHook) {
+  DataRouterStateHook["UseLoaderData"] = "useLoaderData";
+  DataRouterStateHook["UseActionData"] = "useActionData";
+  DataRouterStateHook["UseRouteError"] = "useRouteError";
+  DataRouterStateHook["UseNavigation"] = "useNavigation";
+  DataRouterStateHook["UseRouteLoaderData"] = "useRouteLoaderData";
+  DataRouterStateHook["UseMatches"] = "useMatches";
+  DataRouterStateHook["UseRevalidator"] = "useRevalidator";
+})(DataRouterStateHook || (DataRouterStateHook = {}));
+
+function getDataRouterConsoleError(hookName) {
+  return hookName + " must be used within a data router.  See https://reactrouter.com/en/main/routers/picking-a-router.";
+}
+
+function useDataRouterContext(hookName) {
+  let ctx = React.useContext(DataRouterContext);
+  !ctx ? process.env.NODE_ENV !== "production" ? invariant(false, getDataRouterConsoleError(hookName)) : invariant(false) : void 0;
+  return ctx;
+}
+
 function useDataRouterState(hookName) {
   let state = React.useContext(DataRouterStateContext);
-  !state ? process.env.NODE_ENV !== "production" ? invariant(false, hookName + " must be used within a DataRouterStateContext") : invariant(false) : void 0;
+  !state ? process.env.NODE_ENV !== "production" ? invariant(false, getDataRouterConsoleError(hookName)) : invariant(false) : void 0;
   return state;
 }
 /**
@@ -764,7 +780,7 @@ function useDataRouterState(hookName) {
 
 
 function useNavigation() {
-  let state = useDataRouterState(DataRouterHook.UseNavigation);
+  let state = useDataRouterState(DataRouterStateHook.UseNavigation);
   return state.navigation;
 }
 /**
@@ -773,9 +789,8 @@ function useNavigation() {
  */
 
 function useRevalidator() {
-  let dataRouterContext = React.useContext(DataRouterContext);
-  !dataRouterContext ? process.env.NODE_ENV !== "production" ? invariant(false, "useRevalidator must be used within a DataRouterContext") : invariant(false) : void 0;
-  let state = useDataRouterState(DataRouterHook.UseRevalidator);
+  let dataRouterContext = useDataRouterContext(DataRouterHook.UseRevalidator);
+  let state = useDataRouterState(DataRouterStateHook.UseRevalidator);
   return {
     revalidate: dataRouterContext.router.revalidate,
     state: state.revalidation
@@ -790,7 +805,7 @@ function useMatches() {
   let {
     matches,
     loaderData
-  } = useDataRouterState(DataRouterHook.UseMatches);
+  } = useDataRouterState(DataRouterStateHook.UseMatches);
   return React.useMemo(() => matches.map(match => {
     let {
       pathname,
@@ -813,7 +828,7 @@ function useMatches() {
  */
 
 function useLoaderData() {
-  let state = useDataRouterState(DataRouterHook.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];
@@ -825,7 +840,7 @@ function useLoaderData() {
  */
 
 function useRouteLoaderData(routeId) {
-  let state = useDataRouterState(DataRouterHook.UseRouteLoaderData);
+  let state = useDataRouterState(DataRouterStateHook.UseRouteLoaderData);
   return state.loaderData[routeId];
 }
 /**
@@ -833,7 +848,7 @@ function useRouteLoaderData(routeId) {
  */
 
 function useActionData() {
-  let state = useDataRouterState(DataRouterHook.UseActionData);
+  let state = useDataRouterState(DataRouterStateHook.UseActionData);
   let route = React.useContext(RouteContext);
   !route ? process.env.NODE_ENV !== "production" ? invariant(false, "useActionData must be used inside a RouteContext") : invariant(false) : void 0;
   return Object.values((state == null ? void 0 : state.actionData) || {})[0];
@@ -848,7 +863,7 @@ function useRouteError() {
   var _state$errors;
 
   let error = React.useContext(RouteErrorContext);
-  let state = useDataRouterState(DataRouterHook.UseRouteError);
+  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
   // of RenderErrorBoundary
@@ -1290,6 +1305,7 @@ function createRoutesFromChildren(children, parentPath) {
     }
 
     !(element.type === Route) ? process.env.NODE_ENV !== "production" ? invariant(false, "[" + (typeof element.type === "string" ? element.type : element.type.name) + "] is not a <Route> component. All component children of <Routes> must be a <Route> or <React.Fragment>") : invariant(false) : void 0;
+    !(!element.props.index || !element.props.children) ? process.env.NODE_ENV !== "production" ? invariant(false, "An index route cannot have child routes.") : invariant(false) : void 0;
     let treePath = [...parentPath, index];
     let route = {
       id: element.props.id || treePath.join("-"),