react-router 6.0.0-beta.8 → 6.1.0

package/index.d.ts

@@ -1,6 +1,7 @@
 import * as React from "react";
-import { Action } from "history";
-import type { History, InitialEntry, Location, Path, State, To } from "history";
+import type { History, InitialEntry, Location, Path, To } from "history";
+import { Action as NavigationType } from "history";
+export type { Location, Path, To, NavigationType };
 /**
  * A Navigator is a "location changer"; it's how you get to different locations.
  *
@@ -10,7 +11,7 @@ import type { History, InitialEntry, Location, Path, State, To } from "history";
  * 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;
@@ -18,8 +19,8 @@ interface NavigationContextObject {
 }
 declare const NavigationContext: React.Context<NavigationContextObject>;
 interface LocationContextObject {
-    action: Action;
     location: Location;
+    navigationType: NavigationType;
 }
 declare const LocationContext: React.Context<LocationContextObject>;
 interface RouteContextObject {
@@ -36,13 +37,13 @@ export interface MemoryRouterProps {
 /**
  * A <Router> that stores all entries in memory.
  *
- * @see https://reactrouter.com/api/MemoryRouter
+ * @see https://reactrouter.com/docs/en/v6/api#memoryrouter
  */
 export declare function MemoryRouter({ basename, children, initialEntries, initialIndex }: MemoryRouterProps): React.ReactElement;
 export interface NavigateProps {
     to: To;
     replace?: boolean;
-    state?: State;
+    state?: any;
 }
 /**
  * Changes the current location.
@@ -51,17 +52,18 @@ export interface NavigateProps {
  * able to use hooks. In functional components, we recommend you use the
  * `useNavigate` hook instead.
  *
- * @see https://reactrouter.com/api/Navigate
+ * @see https://reactrouter.com/docs/en/v6/api#navigate
  */
 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/api/Outlet
+ * @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;
@@ -87,14 +89,14 @@ export interface IndexRouteProps {
 /**
  * Declares an element that should be rendered at a certain URL path.
  *
- * @see https://reactrouter.com/api/Route
+ * @see https://reactrouter.com/docs/en/v6/api#route
  */
 export declare function Route(_props: PathRouteProps | LayoutRouteProps | IndexRouteProps): React.ReactElement | null;
 export interface RouterProps {
-    action?: Action;
     basename?: string;
     children?: React.ReactNode;
     location: Partial<Location> | string;
+    navigationType?: NavigationType;
     navigator: Navigator;
     static?: boolean;
 }
@@ -105,9 +107,9 @@ export interface RouterProps {
  * router that is more specific to your environment such as a <BrowserRouter>
  * in web browsers or a <StaticRouter> for server rendering.
  *
- * @see https://reactrouter.com/api/Router
+ * @see https://reactrouter.com/docs/en/v6/api#router
  */
-export declare function Router({ action, basename: basenameProp, children, location: locationProp, navigator, static: staticProp }: RouterProps): React.ReactElement | null;
+export declare function Router({ basename: basenameProp, children, location: locationProp, navigationType, navigator, static: staticProp }: RouterProps): React.ReactElement | null;
 export interface RoutesProps {
     children?: React.ReactNode;
     location?: Partial<Location> | string;
@@ -116,20 +118,20 @@ export interface RoutesProps {
  * A container for a nested tree of <Route> elements that renders the branch
  * that best matches the current location.
  *
- * @see https://reactrouter.com/api/Routes
+ * @see https://reactrouter.com/docs/en/v6/api#routes
  */
 export declare function Routes({ children, location }: RoutesProps): React.ReactElement | null;
 /**
  * Returns the full href for the given "to" value. This is useful for building
  * custom links that are also accessible and preserve right-click behavior.
  *
- * @see https://reactrouter.com/api/useHref
+ * @see https://reactrouter.com/docs/en/v6/api#usehref
  */
 export declare function useHref(to: To): string;
 /**
  * Returns true if this component is a descendant of a <Router>.
  *
- * @see https://reactrouter.com/api/useInRouterContext
+ * @see https://reactrouter.com/docs/en/v6/api#useinroutercontext
  */
 export declare function useInRouterContext(): boolean;
 /**
@@ -140,17 +142,29 @@ export declare function useInRouterContext(): boolean;
  * "routing" in your app, and we'd like to know what your use case is. We may
  * be able to provide something higher-level to better suit your needs.
  *
- * @see https://reactrouter.com/api/useLocation
+ * @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.
+ *
+ * @see https://reactrouter.com/docs/en/v6/api#usenavigationtype
+ */
+export declare function useNavigationType(): NavigationType;
 /**
  * Returns true if the URL for the given "to" value matches the current URL.
  * This is useful for components that need to know "active" state, e.g.
  * <NavLink>.
  *
- * @see https://reactrouter.com/api/useMatch
+ * @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().
  */
@@ -160,33 +174,41 @@ export interface NavigateFunction {
 }
 export interface NavigateOptions {
     replace?: boolean;
-    state?: State;
+    state?: any;
 }
 /**
  * Returns an imperative method for changing the location. Used by <Link>s, but
  * may also be used by other elements to change the location.
  *
- * @see https://reactrouter.com/api/useNavigate
+ * @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/api/useOutlet
+ * @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/api/useParams
+ * @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.
  *
- * @see https://reactrouter.com/api/useResolvedPath
+ * @see https://reactrouter.com/docs/en/v6/api#useresolvedpath
  */
 export declare function useResolvedPath(to: To): Path;
 /**
@@ -195,7 +217,7 @@ export declare function useResolvedPath(to: To): Path;
  * elements in the tree must render an <Outlet> to render their child route's
  * element.
  *
- * @see https://reactrouter.com/api/useRoutes
+ * @see https://reactrouter.com/docs/en/v6/api#useroutes
  */
 export declare function useRoutes(routes: RouteObject[], locationArg?: Partial<Location> | string): React.ReactElement | null;
 /**
@@ -203,7 +225,7 @@ export declare function useRoutes(routes: RouteObject[], locationArg?: Partial<L
  * either a `<Route>` element or an array of them. Used internally by
  * `<Routes>` to create a route config from its children.
  *
- * @see https://reactrouter.com/api/createRoutesFromChildren
+ * @see https://reactrouter.com/docs/en/v6/api#createroutesfromchildren
  */
 export declare function createRoutesFromChildren(children: React.ReactNode): RouteObject[];
 /**
@@ -226,7 +248,7 @@ export interface RouteObject {
 /**
  * Returns a path with params interpolated.
  *
- * @see https://reactrouter.com/api/generatePath
+ * @see https://reactrouter.com/docs/en/v6/api#generatepath
  */
 export declare function generatePath(path: string, params?: Params): string;
 /**
@@ -253,7 +275,7 @@ export interface RouteMatch<ParamKey extends string = string> {
 /**
  * Matches the given routes to a location and returns the match data.
  *
- * @see https://reactrouter.com/api/matchRoutes
+ * @see https://reactrouter.com/docs/en/v6/api#matchroutes
  */
 export declare function matchRoutes(routes: RouteObject[], locationArg: Partial<Location> | string, basename?: string): RouteMatch[] | null;
 /**
@@ -263,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.
@@ -305,13 +327,13 @@ export interface PathMatch<ParamKey extends string = string> {
  * Performs pattern matching on a URL pathname and returns information about
  * the match.
  *
- * @see https://reactrouter.com/api/matchPath
+ * @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.
  *
- * @see https://reactrouter.com/api/resolvePath
+ * @see https://reactrouter.com/docs/en/v6/api#resolvepath
  */
 export declare function resolvePath(to: To, fromPathname?: string): Path;
 /** @internal */

package/index.js

@@ -1,5 +1,5 @@
 /**
- * React Router v6.0.0-beta.8
+ * React Router v6.1.0
  *
  * Copyright (c) Remix Software Inc.
  *
@@ -80,7 +80,7 @@ if (process.env.NODE_ENV !== "production") {
 /**
  * A <Router> that stores all entries in memory.
  *
- * @see https://reactrouter.com/api/MemoryRouter
+ * @see https://reactrouter.com/docs/en/v6/api#memoryrouter
  */
 function MemoryRouter(_ref) {
   let {
@@ -107,8 +107,8 @@ function MemoryRouter(_ref) {
   return /*#__PURE__*/createElement(Router, {
     basename: basename,
     children: children,
-    action: state.action,
     location: state.location,
+    navigationType: state.action,
     navigator: history
   });
 }
@@ -120,7 +120,7 @@ function MemoryRouter(_ref) {
  * able to use hooks. In functional components, we recommend you use the
  * `useNavigate` hook instead.
  *
- * @see https://reactrouter.com/api/Navigate
+ * @see https://reactrouter.com/docs/en/v6/api#navigate
  */
 function Navigate(_ref2) {
   let {
@@ -145,16 +145,16 @@ function Navigate(_ref2) {
 /**
  * Renders the child route's element, if there is one.
  *
- * @see https://reactrouter.com/api/Outlet
+ * @see https://reactrouter.com/docs/en/v6/api#outlet
  */
-function Outlet(_props) {
-  return useOutlet();
+function Outlet(props) {
+  return useOutlet(props.context);
 }
 
 /**
  * Declares an element that should be rendered at a certain URL path.
  *
- * @see https://reactrouter.com/api/Route
+ * @see https://reactrouter.com/docs/en/v6/api#route
  */
 function Route(_props) {
    process.env.NODE_ENV !== "production" ? invariant(false, "A <Route> is only ever to be used as the child of <Routes> element, " + "never rendered directly. Please wrap your <Route> in a <Routes>.") : invariant(false) ;
@@ -167,14 +167,14 @@ function Route(_props) {
  * router that is more specific to your environment such as a <BrowserRouter>
  * in web browsers or a <StaticRouter> for server rendering.
  *
- * @see https://reactrouter.com/api/Router
+ * @see https://reactrouter.com/docs/en/v6/api#router
  */
 function Router(_ref3) {
   let {
-    action = Action.Pop,
     basename: basenameProp = "/",
     children = null,
     location: locationProp,
+    navigationType = Action.Pop,
     navigator,
     static: staticProp = false
   } = _ref3;
@@ -223,8 +223,8 @@ function Router(_ref3) {
   }, /*#__PURE__*/createElement(LocationContext.Provider, {
     children: children,
     value: {
-      action,
-      location
+      location,
+      navigationType
     }
   }));
 }
@@ -233,7 +233,7 @@ function Router(_ref3) {
  * A container for a nested tree of <Route> elements that renders the branch
  * that best matches the current location.
  *
- * @see https://reactrouter.com/api/Routes
+ * @see https://reactrouter.com/docs/en/v6/api#routes
  */
 function Routes(_ref4) {
   let {
@@ -249,7 +249,7 @@ function Routes(_ref4) {
  * Returns the full href for the given "to" value. This is useful for building
  * custom links that are also accessible and preserve right-click behavior.
  *
- * @see https://reactrouter.com/api/useHref
+ * @see https://reactrouter.com/docs/en/v6/api#usehref
  */
 
 function useHref(to) {
@@ -274,15 +274,15 @@ function useHref(to) {
   }
 
   return navigator.createHref({
-    hash,
     pathname: joinedPathname,
-    search
+    search,
+    hash
   });
 }
 /**
  * Returns true if this component is a descendant of a <Router>.
  *
- * @see https://reactrouter.com/api/useInRouterContext
+ * @see https://reactrouter.com/docs/en/v6/api#useinroutercontext
  */
 
 function useInRouterContext() {
@@ -296,7 +296,7 @@ function useInRouterContext() {
  * "routing" in your app, and we'd like to know what your use case is. We may
  * be able to provide something higher-level to better suit your needs.
  *
- * @see https://reactrouter.com/api/useLocation
+ * @see https://reactrouter.com/docs/en/v6/api#uselocation
  */
 
 function useLocation() {
@@ -305,19 +305,32 @@ 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;
+}
 /**
  * Returns true if the URL for the given "to" value matches the current URL.
  * This is useful for components that need to know "active" state, e.g.
  * <NavLink>.
  *
- * @see https://reactrouter.com/api/useMatch
+ * @see https://reactrouter.com/docs/en/v6/api#usematch
  */
 
 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().
@@ -327,7 +340,7 @@ function useMatch(pattern) {
  * Returns an imperative method for changing the location. Used by <Link>s, but
  * may also be used by other elements to change the location.
  *
- * @see https://reactrouter.com/api/useNavigate
+ * @see https://reactrouter.com/docs/en/v6/api#usenavigate
  */
 function useNavigate() {
   !useInRouterContext() ? process.env.NODE_ENV !== "production" ? invariant(false, // TODO: This error is probably because they somehow have 2 versions of the
@@ -371,21 +384,34 @@ 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.
  *
- * @see https://reactrouter.com/api/useOutlet
+ * @see https://reactrouter.com/docs/en/v6/api#useoutlet
  */
 
-function useOutlet() {
-  return useContext(RouteContext).outlet;
+function useOutlet(context) {
+  let outlet = useContext(RouteContext).outlet;
+  return /*#__PURE__*/createElement(OutletContext.Provider, {
+    value: context
+  }, outlet);
 }
 /**
  * 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/api/useParams
+ * @see https://reactrouter.com/docs/en/v6/api#useparams
  */
 
 function useParams() {
@@ -398,7 +424,7 @@ function useParams() {
 /**
  * Resolves the pathname of the given `to` value against the current location.
  *
- * @see https://reactrouter.com/api/useResolvedPath
+ * @see https://reactrouter.com/docs/en/v6/api#useresolvedpath
  */
 
 function useResolvedPath(to) {
@@ -417,7 +443,7 @@ function useResolvedPath(to) {
  * elements in the tree must render an <Outlet> to render their child route's
  * element.
  *
- * @see https://reactrouter.com/api/useRoutes
+ * @see https://reactrouter.com/docs/en/v6/api#useroutes
  */
 
 function useRoutes(routes, locationArg) {
@@ -455,7 +481,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();
@@ -479,13 +505,13 @@ function useRoutes(routes, locationArg) {
 
   if (process.env.NODE_ENV !== "production") {
     process.env.NODE_ENV !== "production" ? warning(parentRoute || matches != null, "No routes matched location \"" + location.pathname + location.search + location.hash + "\" ") : void 0;
-    process.env.NODE_ENV !== "production" ? warning(matches == null || matches[matches.length - 1].route.element != null, "Matched leaf route at location \"" + location.pathname + location.search + location.hash + "\" does not have an element. " + "This means it will render an <Outlet /> with a null value by default resulting in an \"empty\" page.") : void 0;
+    process.env.NODE_ENV !== "production" ? warning(matches == null || matches[matches.length - 1].route.element !== undefined, "Matched leaf route at location \"" + location.pathname + location.search + location.hash + "\" does not have an element. " + "This means it will render an <Outlet /> with a null value by default resulting in an \"empty\" page.") : void 0;
   }
 
   return _renderMatches(matches && matches.map(match => Object.assign({}, match, {
     params: Object.assign({}, parentParams, match.params),
     pathname: joinPaths([parentPathnameBase, match.pathname]),
-    pathnameBase: joinPaths([parentPathnameBase, match.pathnameBase])
+    pathnameBase: match.pathnameBase === "/" ? parentPathnameBase : joinPaths([parentPathnameBase, match.pathnameBase])
   })), parentMatches);
 } ///////////////////////////////////////////////////////////////////////////////
 // UTILS
@@ -496,7 +522,7 @@ function useRoutes(routes, locationArg) {
  * either a `<Route>` element or an array of them. Used internally by
  * `<Routes>` to create a route config from its children.
  *
- * @see https://reactrouter.com/api/createRoutesFromChildren
+ * @see https://reactrouter.com/docs/en/v6/api#createroutesfromchildren
  */
 
 function createRoutesFromChildren(children) {
@@ -514,6 +540,7 @@ function createRoutesFromChildren(children) {
       return;
     }
 
+    !(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;
     let route = {
       caseSensitive: element.props.caseSensitive,
       element: element.props.element,
@@ -536,7 +563,7 @@ function createRoutesFromChildren(children) {
 /**
  * Returns a path with params interpolated.
  *
- * @see https://reactrouter.com/api/generatePath
+ * @see https://reactrouter.com/docs/en/v6/api#generatepath
  */
 function generatePath(path, params) {
   if (params === void 0) {
@@ -555,7 +582,7 @@ function generatePath(path, params) {
 /**
  * Matches the given routes to a location and returns the match data.
  *
- * @see https://reactrouter.com/api/matchRoutes
+ * @see https://reactrouter.com/docs/en/v6/api#matchroutes
  */
 function matchRoutes(routes, locationArg, basename) {
   if (basename === void 0) {
@@ -574,7 +601,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;
@@ -597,7 +624,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("/")) {
@@ -670,9 +698,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;
@@ -691,7 +717,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]),
@@ -702,8 +728,6 @@ routesArg, pathname) {
     if (match.pathnameBase !== "/") {
       matchedPathname = joinPaths([matchedPathname, match.pathnameBase]);
     }
-
-    routes = route.children;
   }
 
   return matches;
@@ -725,7 +749,7 @@ function _renderMatches(matches, parentMatches) {
   if (matches == null) return null;
   return matches.reduceRight((outlet, match, index) => {
     return /*#__PURE__*/createElement(RouteContext.Provider, {
-      children: match.route.element || /*#__PURE__*/createElement(Outlet, null),
+      children: match.route.element !== undefined ? match.route.element : /*#__PURE__*/createElement(Outlet, null),
       value: {
         outlet,
         matches: parentMatches.concat(matches.slice(0, index + 1))
@@ -742,7 +766,7 @@ function _renderMatches(matches, parentMatches) {
  * Performs pattern matching on a URL pathname and returns information about
  * the match.
  *
- * @see https://reactrouter.com/api/matchPath
+ * @see https://reactrouter.com/docs/en/v6/api#matchpath
  */
 function matchPath(pattern, pathname) {
   if (typeof pattern === "string") {
@@ -803,10 +827,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");
@@ -824,7 +848,7 @@ function safelyDecodeURIComponent(value, paramName) {
 /**
  * Returns a resolved path object relative to the given pathname.
  *
- * @see https://reactrouter.com/api/resolvePath
+ * @see https://reactrouter.com/docs/en/v6/api#resolvepath
  */
 
 
@@ -934,5 +958,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, 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