react-router 6.0.2 → 6.2.1

package/index.d.ts

@@ -11,7 +11,7 @@ export type { Location, Path, To, NavigationType };
  * to avoid "tearing" that may occur in a suspense-enabled app if the action
  * and/or location were to be read directly from the history instance.
  */
-export declare type Navigator = Omit<History, "action" | "location" | "back" | "forward" | "listen" | "block">;
+export declare type Navigator = Pick<History, "go" | "push" | "replace" | "createHref">;
 interface NavigationContextObject {
     basename: string;
     navigator: Navigator;
@@ -56,33 +56,34 @@ export interface NavigateProps {
  */
 export declare function Navigate({ to, replace, state }: NavigateProps): null;
 export interface OutletProps {
+    context?: unknown;
 }
 /**
  * Renders the child route's element, if there is one.
  *
  * @see https://reactrouter.com/docs/en/v6/api#outlet
  */
-export declare function Outlet(_props: OutletProps): React.ReactElement | null;
+export declare function Outlet(props: OutletProps): React.ReactElement | null;
 export interface RouteProps {
     caseSensitive?: boolean;
     children?: React.ReactNode;
-    element?: React.ReactElement | null;
+    element?: React.ReactNode | null;
     index?: boolean;
     path?: string;
 }
 export interface PathRouteProps {
     caseSensitive?: boolean;
     children?: React.ReactNode;
-    element?: React.ReactElement | null;
+    element?: React.ReactNode | null;
     index?: false;
     path: string;
 }
 export interface LayoutRouteProps {
     children?: React.ReactNode;
-    element?: React.ReactElement | null;
+    element?: React.ReactNode | null;
 }
 export interface IndexRouteProps {
-    element?: React.ReactElement | null;
+    element?: React.ReactNode | null;
     index: true;
 }
 /**
@@ -144,6 +145,11 @@ export declare function useInRouterContext(): boolean;
  * @see https://reactrouter.com/docs/en/v6/api#uselocation
  */
 export declare function useLocation(): Location;
+declare type ParamParseFailed = {
+    failed: true;
+};
+declare type ParamParseSegment<Segment extends string> = Segment extends `${infer LeftSegment}/${infer RightSegment}` ? ParamParseSegment<LeftSegment> extends infer LeftResult ? ParamParseSegment<RightSegment> extends infer RightResult ? LeftResult extends string ? RightResult extends string ? LeftResult | RightResult : LeftResult : RightResult extends string ? RightResult : ParamParseFailed : ParamParseFailed : ParamParseSegment<RightSegment> extends infer RightResult ? RightResult extends string ? RightResult : ParamParseFailed : ParamParseFailed : Segment extends `:${infer Remaining}` ? Remaining : ParamParseFailed;
+declare type ParamParseKey<Segment extends string> = ParamParseSegment<Segment> extends string ? ParamParseSegment<Segment> : string;
 /**
  * Returns the current navigation action which describes how the router came to
  * the current location, either by a pop, push, or replace on the history stack.
@@ -158,7 +164,7 @@ export declare function useNavigationType(): NavigationType;
  *
  * @see https://reactrouter.com/docs/en/v6/api#usematch
  */
-export declare function useMatch<ParamKey extends string = string>(pattern: PathPattern | string): PathMatch<ParamKey> | null;
+export declare function useMatch<ParamKey extends ParamParseKey<Path>, Path extends string>(pattern: PathPattern<Path> | Path): PathMatch<ParamKey> | null;
 /**
  * The interface for the navigate() function returned from useNavigate().
  */
@@ -177,20 +183,28 @@ export interface NavigateOptions {
  * @see https://reactrouter.com/docs/en/v6/api#usenavigate
  */
 export declare function useNavigate(): NavigateFunction;
+/**
+ * Returns the context (if provided) for the child route at this level of the route
+ * hierarchy.
+ * @see https://reactrouter.com/docs/en/v6/api#useoutletcontext
+ */
+export declare function useOutletContext<Context = unknown>(): Context;
 /**
  * Returns the element for the child route at this level of the route
  * hierarchy. Used internally by <Outlet> to render child routes.
  *
  * @see https://reactrouter.com/docs/en/v6/api#useoutlet
  */
-export declare function useOutlet(): React.ReactElement | null;
+export declare function useOutlet(context?: unknown): React.ReactElement | null;
 /**
  * Returns an object of key/value pairs of the dynamic params from the current
  * URL that were matched by the route path.
  *
  * @see https://reactrouter.com/docs/en/v6/api#useparams
  */
-export declare function useParams<Key extends string = string>(): Readonly<Params<Key>>;
+export declare function useParams<ParamsOrKey extends string | Record<string, string | undefined> = string>(): Readonly<[
+    ParamsOrKey
+] extends [string] ? Params<ParamsOrKey> : Partial<ParamsOrKey>>;
 /**
  * Resolves the pathname of the given `to` value against the current location.
  *
@@ -271,13 +285,13 @@ export declare function renderMatches(matches: RouteMatch[] | null): React.React
 /**
  * A PathPattern is used to match on some portion of a URL pathname.
  */
-export interface PathPattern {
+export interface PathPattern<Path extends string = string> {
     /**
      * A string to match against a URL pathname. May contain `:id`-style segments
      * to indicate placeholders for dynamic parameters. May also end with `/*` to
      * indicate matching the rest of the URL pathname.
      */
-    path: string;
+    path: Path;
     /**
      * Should be `true` if the static portions of the `path` should be matched in
      * the same case.
@@ -315,7 +329,7 @@ export interface PathMatch<ParamKey extends string = string> {
  *
  * @see https://reactrouter.com/docs/en/v6/api#matchpath
  */
-export declare function matchPath<ParamKey extends string = string>(pattern: PathPattern | string, pathname: string): PathMatch<ParamKey> | null;
+export declare function matchPath<ParamKey extends ParamParseKey<Path>, Path extends string>(pattern: PathPattern<Path> | Path, pathname: string): PathMatch<ParamKey> | null;
 /**
  * Returns a resolved path object relative to the given pathname.
  *

package/index.js

@@ -1,5 +1,5 @@
 /**
- * React Router v6.0.2
+ * React Router v6.2.1
  *
  * Copyright (c) Remix Software Inc.
  *
@@ -147,8 +147,8 @@ function Navigate(_ref2) {
  *
  * @see https://reactrouter.com/docs/en/v6/api#outlet
  */
-function Outlet(_props) {
-  return useOutlet();
+function Outlet(props) {
+  return useOutlet(props.context);
 }
 
 /**
@@ -305,13 +305,13 @@ function useLocation() {
   "useLocation() may be used only in the context of a <Router> component.") : invariant(false) : void 0;
   return useContext(LocationContext).location;
 }
+
 /**
  * Returns the current navigation action which describes how the router came to
  * the current location, either by a pop, push, or replace on the history stack.
  *
  * @see https://reactrouter.com/docs/en/v6/api#usenavigationtype
  */
-
 function useNavigationType() {
   return useContext(LocationContext).navigationType;
 }
@@ -327,7 +327,10 @@ function useMatch(pattern) {
   !useInRouterContext() ? process.env.NODE_ENV !== "production" ? invariant(false, // TODO: This error is probably because they somehow have 2 versions of the
   // router loaded. We can help them understand how to avoid that.
   "useMatch() may be used only in the context of a <Router> component.") : invariant(false) : void 0;
-  return matchPath(pattern, useLocation().pathname);
+  let {
+    pathname
+  } = useLocation();
+  return useMemo(() => matchPath(pattern, pathname), [pathname, pattern]);
 }
 /**
  * The interface for the navigate() function returned from useNavigate().
@@ -381,6 +384,16 @@ function useNavigate() {
   }, [basename, navigator, routePathnamesJson, locationPathname]);
   return navigate;
 }
+const OutletContext = /*#__PURE__*/createContext(null);
+/**
+ * Returns the context (if provided) for the child route at this level of the route
+ * hierarchy.
+ * @see https://reactrouter.com/docs/en/v6/api#useoutletcontext
+ */
+
+function useOutletContext() {
+  return useContext(OutletContext);
+}
 /**
  * Returns the element for the child route at this level of the route
  * hierarchy. Used internally by <Outlet> to render child routes.
@@ -388,8 +401,16 @@ function useNavigate() {
  * @see https://reactrouter.com/docs/en/v6/api#useoutlet
  */
 
-function useOutlet() {
-  return useContext(RouteContext).outlet;
+function useOutlet(context) {
+  let outlet = useContext(RouteContext).outlet;
+
+  if (outlet) {
+    return /*#__PURE__*/createElement(OutletContext.Provider, {
+      value: context
+    }, outlet);
+  }
+
+  return outlet;
 }
 /**
  * Returns an object of key/value pairs of the dynamic params from the current
@@ -465,7 +486,7 @@ function useRoutes(routes, locationArg) {
     //   );
     // }
     let parentPath = parentRoute && parentRoute.path || "";
-    warningOnce(parentPathname, !parentRoute || parentPath.endsWith("*"), "You rendered descendant <Routes> (or called `useRoutes()`) at " + ("\"" + parentPathname + "\" (under <Route path=\"" + parentPath + "\">) but the ") + "parent route path has no trailing \"*\". This means if you navigate " + "deeper, the parent won't match anymore and therefore the child " + "routes will never render.\n\n" + ("Please change the parent <Route path=\"" + parentPath + "\"> to <Route ") + ("path=\"" + parentPath + "/*\">."));
+    warningOnce(parentPathname, !parentRoute || parentPath.endsWith("*"), "You rendered descendant <Routes> (or called `useRoutes()`) at " + ("\"" + parentPathname + "\" (under <Route path=\"" + parentPath + "\">) but the ") + "parent route path has no trailing \"*\". This means if you navigate " + "deeper, the parent won't match anymore and therefore the child " + "routes will never render.\n\n" + ("Please change the parent <Route path=\"" + parentPath + "\"> to <Route ") + ("path=\"" + (parentPath === "/" ? "*" : parentPath + "/*") + "\">."));
   }
 
   let locationFromContext = useLocation();
@@ -585,7 +606,7 @@ function matchRoutes(routes, locationArg, basename) {
   let matches = null;
 
   for (let i = 0; matches == null && i < branches.length; ++i) {
-    matches = matchRouteBranch(branches[i], routes, pathname);
+    matches = matchRouteBranch(branches[i], pathname);
   }
 
   return matches;
@@ -608,7 +629,8 @@ function flattenRoutes(routes, branches, parentsMeta, parentPath) {
     let meta = {
       relativePath: route.path || "",
       caseSensitive: route.caseSensitive === true,
-      childrenIndex: index
+      childrenIndex: index,
+      route
     };
 
     if (meta.relativePath.startsWith("/")) {
@@ -681,9 +703,7 @@ function compareIndexes(a, b) {
   0;
 }
 
-function matchRouteBranch(branch, // TODO: attach original route object inside routesMeta so we don't need this arg
-routesArg, pathname) {
-  let routes = routesArg;
+function matchRouteBranch(branch, pathname) {
   let {
     routesMeta
   } = branch;
@@ -702,7 +722,7 @@ routesArg, pathname) {
     }, remainingPathname);
     if (!match) return null;
     Object.assign(matchedParams, match.params);
-    let route = routes[meta.childrenIndex];
+    let route = meta.route;
     matches.push({
       params: matchedParams,
       pathname: joinPaths([matchedPathname, match.pathname]),
@@ -713,8 +733,6 @@ routesArg, pathname) {
     if (match.pathnameBase !== "/") {
       matchedPathname = joinPaths([matchedPathname, match.pathnameBase]);
     }
-
-    routes = route.children;
   }
 
   return matches;
@@ -814,10 +832,10 @@ function compilePath(path, caseSensitive, end) {
     : "(?:\\/(.+)|\\/*)$"; // Don't include the / in params["*"]
   } else {
     regexpSource += end ? "\\/*$" // When matching to the end, ignore trailing slashes
-    : // Otherwise, at least match a word boundary. This restricts parent
-    // routes to matching only their own words and nothing more, e.g. parent
+    : // Otherwise, match a word boundary or a proceeding /. The word boundary restricts
+    // parent routes to matching only their own words and nothing more, e.g. parent
     // route "/home" should not match "/home2".
-    "(?:\\b|$)";
+    "(?:\\b|\\/|$)";
   }
 
   let matcher = new RegExp(regexpSource, caseSensitive ? undefined : "i");
@@ -945,5 +963,5 @@ const normalizeSearch = search => !search || search === "?" ? "" : search.starts
 
 const normalizeHash = hash => !hash || hash === "#" ? "" : hash.startsWith("#") ? hash : "#" + hash; ///////////////////////////////////////////////////////////////////////////////
 
-export { MemoryRouter, Navigate, Outlet, Route, Router, Routes, LocationContext as UNSAFE_LocationContext, NavigationContext as UNSAFE_NavigationContext, RouteContext as UNSAFE_RouteContext, createRoutesFromChildren, generatePath, matchPath, matchRoutes, renderMatches, resolvePath, useHref, useInRouterContext, useLocation, useMatch, useNavigate, useNavigationType, useOutlet, useParams, useResolvedPath, useRoutes };
+export { MemoryRouter, Navigate, Outlet, Route, Router, Routes, LocationContext as UNSAFE_LocationContext, NavigationContext as UNSAFE_NavigationContext, RouteContext as UNSAFE_RouteContext, createRoutesFromChildren, generatePath, matchPath, matchRoutes, renderMatches, resolvePath, useHref, useInRouterContext, useLocation, useMatch, useNavigate, useNavigationType, useOutlet, useOutletContext, useParams, useResolvedPath, useRoutes };
 //# sourceMappingURL=index.js.map