react-router 6.0.0-beta.5 → 6.0.0

package/index.js

@@ -1,24 +1,16 @@
+/**
+ * React Router v6.0.0
+ *
+ * Copyright (c) Remix Software Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE.md file in the root directory of this source tree.
+ *
+ * @license MIT
+ */
 import { createContext, useRef, useState, useLayoutEffect, createElement, useContext, useEffect, useMemo, useCallback, Children, isValidElement, Fragment } from 'react';
 import { createMemoryHistory, Action, parsePath } from 'history';
 
-function _extends() {
-  _extends = Object.assign || function (target) {
-    for (var i = 1; i < arguments.length; i++) {
-      var source = arguments[i];
-
-      for (var key in source) {
-        if (Object.prototype.hasOwnProperty.call(source, key)) {
-          target[key] = source[key];
-        }
-      }
-    }
-
-    return target;
-  };
-
-  return _extends.apply(this, arguments);
-}
-
 function invariant(cond, message) {
   if (!cond) throw new Error(message);
 }
@@ -46,7 +38,20 @@ function warningOnce(key, cond, message) {
     alreadyWarned[key] = true;
     process.env.NODE_ENV !== "production" ? warning(false, message) : void 0;
   }
-}
+} ///////////////////////////////////////////////////////////////////////////////
+// CONTEXT
+///////////////////////////////////////////////////////////////////////////////
+
+/**
+ * A Navigator is a "location changer"; it's how you get to different locations.
+ *
+ * Every history instance conforms to the Navigator interface, but the
+ * distinction is useful primarily when it comes to the low-level <Router> API
+ * where both the location and a navigator must be provided separately in order
+ * 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.
+ */
+
 
 const NavigationContext = /*#__PURE__*/createContext(null);
 
@@ -62,21 +67,21 @@ if (process.env.NODE_ENV !== "production") {
 
 const RouteContext = /*#__PURE__*/createContext({
   outlet: null,
-  params: {},
-  pathname: "/",
-  route: null
+  matches: []
 });
 
 if (process.env.NODE_ENV !== "production") {
   RouteContext.displayName = "Route";
-}
+} ///////////////////////////////////////////////////////////////////////////////
+// COMPONENTS
+///////////////////////////////////////////////////////////////////////////////
+
+
 /**
  * A <Router> that stores all entries in memory.
  *
  * @see https://reactrouter.com/api/MemoryRouter
  */
-
-
 function MemoryRouter(_ref) {
   let {
     basename,
@@ -102,11 +107,12 @@ function MemoryRouter(_ref) {
   return /*#__PURE__*/createElement(Router, {
     basename: basename,
     children: children,
-    action: state.action,
     location: state.location,
+    navigationType: state.action,
     navigator: history
   });
 }
+
 /**
  * Changes the current location.
  *
@@ -116,7 +122,6 @@ function MemoryRouter(_ref) {
  *
  * @see https://reactrouter.com/api/Navigate
  */
-
 function Navigate(_ref2) {
   let {
     to,
@@ -136,24 +141,25 @@ function Navigate(_ref2) {
   });
   return null;
 }
+
 /**
  * Renders the child route's element, if there is one.
  *
  * @see https://reactrouter.com/api/Outlet
  */
-
 function Outlet(_props) {
   return useOutlet();
 }
+
 /**
  * Declares an element that should be rendered at a certain URL path.
  *
  * @see https://reactrouter.com/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) ;
 }
+
 /**
  * Provides location context for the rest of the app.
  *
@@ -163,13 +169,12 @@ function Route(_props) {
  *
  * @see https://reactrouter.com/api/Router
  */
-
 function Router(_ref3) {
   let {
-    action = Action.Pop,
     basename: basenameProp = "/",
     children = null,
     location: locationProp,
+    navigationType = Action.Pop,
     navigator,
     static: staticProp = false
   } = _ref3;
@@ -218,18 +223,18 @@ function Router(_ref3) {
   }, /*#__PURE__*/createElement(LocationContext.Provider, {
     children: children,
     value: {
-      action,
-      location
+      location,
+      navigationType
     }
   }));
 }
+
 /**
  * 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
  */
-
 function Routes(_ref4) {
   let {
     children,
@@ -240,43 +245,6 @@ function Routes(_ref4) {
 // HOOKS
 ///////////////////////////////////////////////////////////////////////////////
 
-/**
- * Blocks all navigation attempts. This is useful for preventing the page from
- * changing until some condition is met, like saving form data.
- *
- * @see https://reactrouter.com/api/useBlocker
- */
-
-function useBlocker(blocker, when) {
-  if (when === void 0) {
-    when = true;
-  }
-
-  !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.
-  "useBlocker() may be used only in the context of a <Router> component.") : invariant(false) : void 0;
-  let {
-    navigator
-  } = useContext(NavigationContext);
-  useEffect(() => {
-    if (!when) return;
-    let unblock = navigator.block(tx => {
-      let autoUnblockingTx = _extends({}, tx, {
-        retry() {
-          // Automatically unblock the transition so it can play all the way
-          // through before retrying it. TODO: Figure out how to re-enable
-          // this block if the transition is cancelled for some reason.
-          unblock();
-          tx.retry();
-        }
-
-      });
-
-      blocker(autoUnblockingTx);
-    });
-    return unblock;
-  }, [navigator, blocker, when]);
-}
 /**
  * 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.
@@ -292,15 +260,24 @@ function useHref(to) {
     basename,
     navigator
   } = useContext(NavigationContext);
-  let path = useResolvedPath(to);
+  let {
+    hash,
+    pathname,
+    search
+  } = useResolvedPath(to);
+  let joinedPathname = pathname;
 
   if (basename !== "/") {
     let toPathname = getToPathname(to);
     let endsWithSlash = toPathname != null && toPathname.endsWith("/");
-    path.pathname = path.pathname === "/" ? basename + (endsWithSlash ? "/" : "") : joinPaths([basename, path.pathname]);
+    joinedPathname = pathname === "/" ? basename + (endsWithSlash ? "/" : "") : joinPaths([basename, pathname]);
   }
 
-  return navigator.createHref(path);
+  return navigator.createHref({
+    pathname: joinedPathname,
+    search,
+    hash
+  });
 }
 /**
  * Returns true if this component is a descendant of a <Router>.
@@ -328,6 +305,16 @@ 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/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.
@@ -342,13 +329,16 @@ function useMatch(pattern) {
   "useMatch() may be used only in the context of a <Router> component.") : invariant(false) : void 0;
   return matchPath(pattern, useLocation().pathname);
 }
+/**
+ * The interface for the navigate() function returned from useNavigate().
+ */
+
 /**
  * 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
  */
-
 function useNavigate() {
   !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.
@@ -358,11 +348,12 @@ function useNavigate() {
     navigator
   } = useContext(NavigationContext);
   let {
-    pathname: routePathname
+    matches
   } = useContext(RouteContext);
   let {
     pathname: locationPathname
   } = useLocation();
+  let routePathnamesJson = JSON.stringify(matches.map(match => match.pathnameBase));
   let activeRef = useRef(false);
   useEffect(() => {
     activeRef.current = true;
@@ -380,14 +371,14 @@ function useNavigate() {
       return;
     }
 
-    let path = resolveTo(to, routePathname, locationPathname);
+    let path = resolveTo(to, JSON.parse(routePathnamesJson), locationPathname);
 
     if (basename !== "/") {
       path.pathname = joinPaths([basename, path.pathname]);
     }
 
     (!!options.replace ? navigator.replace : navigator.push)(path, options.state);
-  }, [basename, navigator, routePathname, locationPathname]);
+  }, [basename, navigator, routePathnamesJson, locationPathname]);
   return navigate;
 }
 /**
@@ -408,7 +399,11 @@ function useOutlet() {
  */
 
 function useParams() {
-  return useContext(RouteContext).params;
+  let {
+    matches
+  } = useContext(RouteContext);
+  let routeMatch = matches[matches.length - 1];
+  return routeMatch ? routeMatch.params : {};
 }
 /**
  * Resolves the pathname of the given `to` value against the current location.
@@ -417,13 +412,14 @@ function useParams() {
  */
 
 function useResolvedPath(to) {
+  let {
+    matches
+  } = useContext(RouteContext);
   let {
     pathname: locationPathname
   } = useLocation();
-  let {
-    pathname: routePathname
-  } = useContext(RouteContext);
-  return useMemo(() => resolveTo(to, routePathname, locationPathname), [to, routePathname, locationPathname]);
+  let routePathnamesJson = JSON.stringify(matches.map(match => match.pathnameBase));
+  return useMemo(() => resolveTo(to, JSON.parse(routePathnamesJson), locationPathname), [to, routePathnamesJson, locationPathname]);
 }
 /**
  * Returns the element of the route that matched the current location, prepared
@@ -439,10 +435,13 @@ function useRoutes(routes, locationArg) {
   // router loaded. We can help them understand how to avoid that.
   "useRoutes() may be used only in the context of a <Router> component.") : invariant(false) : void 0;
   let {
-    params: parentParams,
-    pathname: parentPathname,
-    route: parentRoute
+    matches: parentMatches
   } = useContext(RouteContext);
+  let routeMatch = parentMatches[parentMatches.length - 1];
+  let parentParams = routeMatch ? routeMatch.params : {};
+  let parentPathname = routeMatch ? routeMatch.pathname : "/";
+  let parentPathnameBase = routeMatch ? routeMatch.pathnameBase : "/";
+  let parentRoute = routeMatch && routeMatch.route;
 
   if (process.env.NODE_ENV !== "production") {
     // You won't get a warning about 2 different <Routes> under a <Route>
@@ -470,21 +469,34 @@ function useRoutes(routes, locationArg) {
   }
 
   let locationFromContext = useLocation();
-  let location = locationArg ? typeof locationArg === "string" ? parsePath(locationArg) : locationArg : locationFromContext;
+  let location;
+
+  if (locationArg) {
+    var _parsedLocationArg$pa;
+
+    let parsedLocationArg = typeof locationArg === "string" ? parsePath(locationArg) : locationArg;
+    !(parentPathnameBase === "/" || ((_parsedLocationArg$pa = parsedLocationArg.pathname) == null ? void 0 : _parsedLocationArg$pa.startsWith(parentPathnameBase))) ? process.env.NODE_ENV !== "production" ? invariant(false, "When overriding the location using `<Routes location>` or `useRoutes(routes, location)`, " + "the location pathname must begin with the portion of the URL pathname that was " + ("matched by all parent routes. The current pathname base is \"" + parentPathnameBase + "\" ") + ("but pathname \"" + parsedLocationArg.pathname + "\" was given in the `location` prop.")) : invariant(false) : void 0;
+    location = parsedLocationArg;
+  } else {
+    location = locationFromContext;
+  }
+
   let pathname = location.pathname || "/";
-  let parentPathnameStart = getPathnameStart(parentPathname, parentParams);
-  let remainingPathname = parentPathnameStart === "/" ? pathname : pathname.slice(parentPathnameStart.length);
+  let remainingPathname = parentPathnameBase === "/" ? pathname : pathname.slice(parentPathnameBase.length) || "/";
   let matches = matchRoutes(routes, {
     pathname: remainingPathname
   });
 
   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 !== 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, {
-    pathname: joinPaths([parentPathnameStart, match.pathname])
-  })));
+  return _renderMatches(matches && matches.map(match => Object.assign({}, match, {
+    params: Object.assign({}, parentParams, match.params),
+    pathname: joinPaths([parentPathnameBase, match.pathname]),
+    pathnameBase: match.pathnameBase === "/" ? parentPathnameBase : joinPaths([parentPathnameBase, match.pathnameBase])
+  })), parentMatches);
 } ///////////////////////////////////////////////////////////////////////////////
 // UTILS
 ///////////////////////////////////////////////////////////////////////////////
@@ -513,10 +525,10 @@ function createRoutesFromChildren(children) {
     }
 
     let route = {
-      path: element.props.path,
       caseSensitive: element.props.caseSensitive,
+      element: element.props.element,
       index: element.props.index,
-      element: element.props.element
+      path: element.props.path
     };
 
     if (element.props.children) {
@@ -527,12 +539,15 @@ function createRoutesFromChildren(children) {
   });
   return routes;
 }
+/**
+ * The parameters that were parsed from the URL path.
+ */
+
 /**
  * Returns a path with params interpolated.
  *
  * @see https://reactrouter.com/api/generatePath
  */
-
 function generatePath(path, params) {
   if (params === void 0) {
     params = {};
@@ -543,12 +558,15 @@ function generatePath(path, params) {
     return params[key];
   }).replace(/\/*\*$/, _ => params["*"] == null ? "" : params["*"].replace(/^\/*/, "/"));
 }
+/**
+ * A RouteMatch contains info about how a route matched a URL.
+ */
+
 /**
  * Matches the given routes to a location and returns the match data.
  *
  * @see https://reactrouter.com/api/matchRoutes
  */
-
 function matchRoutes(routes, locationArg, basename) {
   if (basename === void 0) {
     basename = "/";
@@ -605,11 +623,17 @@ function flattenRoutes(routes, branches, parentsMeta, parentPath) {
     if (route.children && route.children.length > 0) {
       !(route.index !== true) ? process.env.NODE_ENV !== "production" ? invariant(false, "Index routes must not have child routes. Please remove " + ("all child routes from route path \"" + path + "\".")) : invariant(false) : void 0;
       flattenRoutes(route.children, branches, routesMeta, path);
+    } // Routes without a path shouldn't ever match by themselves unless they are
+    // index routes, so don't add them to the list of possible branches.
+
+
+    if (route.path == null && !route.index) {
+      return;
     }
 
     branches.push({
       path,
-      score: computeScore(path),
+      score: computeScore(path, route.index),
       routesMeta
     });
   });
@@ -622,14 +646,15 @@ function rankRouteBranches(branches) {
 }
 
 const paramRe = /^:\w+$/;
-const dynamicSegmentValue = 2;
+const dynamicSegmentValue = 3;
+const indexRouteValue = 2;
 const emptySegmentValue = 1;
 const staticSegmentValue = 10;
 const splatPenalty = -2;
 
 const isSplat = s => s === "*";
 
-function computeScore(path) {
+function computeScore(path, index) {
   let segments = path.split("/");
   let initialScore = segments.length;
 
@@ -637,6 +662,10 @@ function computeScore(path) {
     initialScore += splatPenalty;
   }
 
+  if (index) {
+    initialScore += indexRouteValue;
+  }
+
   return segments.filter(s => !isSplat(s)).reduce((score, segment) => score + (paramRe.test(segment) ? dynamicSegmentValue : segment === "" ? emptySegmentValue : staticSegmentValue), initialScore);
 }
 
@@ -651,7 +680,8 @@ function compareIndexes(a, b) {
   0;
 }
 
-function matchRouteBranch(branch, routesArg, pathname) {
+function matchRouteBranch(branch, // TODO: attach original route object inside routesMeta so we don't need this arg
+routesArg, pathname) {
   let routes = routesArg;
   let {
     routesMeta
@@ -662,27 +692,25 @@ function matchRouteBranch(branch, routesArg, pathname) {
 
   for (let i = 0; i < routesMeta.length; ++i) {
     let meta = routesMeta[i];
-    let trailingPathname = matchedPathname === "/" ? pathname : pathname.slice(matchedPathname.length) || "/";
+    let end = i === routesMeta.length - 1;
+    let remainingPathname = matchedPathname === "/" ? pathname : pathname.slice(matchedPathname.length) || "/";
     let match = matchPath({
       path: meta.relativePath,
       caseSensitive: meta.caseSensitive,
-      end: i === routesMeta.length - 1
-    }, trailingPathname);
+      end
+    }, remainingPathname);
     if (!match) return null;
     Object.assign(matchedParams, match.params);
     let route = routes[meta.childrenIndex];
     matches.push({
       params: matchedParams,
-      pathname: match.pathname === "/" ? matchedPathname : joinPaths([matchedPathname, match.pathname]),
+      pathname: joinPaths([matchedPathname, match.pathname]),
+      pathnameBase: joinPaths([matchedPathname, match.pathnameBase]),
       route
     });
-    let pathnameStart = getPathnameStart(match.pathname, match.params);
 
-    if (pathnameStart !== "/") {
-      // Add only the portion of the match.pathname that comes before the * to
-      // the matchedPathname. This allows child routes to match against the
-      // portion of the pathname that was matched by the *.
-      matchedPathname = joinPaths([matchedPathname, pathnameStart]);
+    if (match.pathnameBase !== "/") {
+      matchedPathname = joinPaths([matchedPathname, match.pathnameBase]);
     }
 
     routes = route.children;
@@ -696,26 +724,36 @@ function matchRouteBranch(branch, routesArg, pathname) {
 
 
 function renderMatches(matches) {
+  return _renderMatches(matches);
+}
+
+function _renderMatches(matches, parentMatches) {
+  if (parentMatches === void 0) {
+    parentMatches = [];
+  }
+
   if (matches == null) return null;
-  return matches.reduceRight((outlet, match) => {
+  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,
-        params: match.params,
-        pathname: match.pathname,
-        route: match.route
+        matches: parentMatches.concat(matches.slice(0, index + 1))
       }
     });
   }, null);
 }
+/**
+ * A PathPattern is used to match on some portion of a URL pathname.
+ */
+
+
 /**
  * Performs pattern matching on a URL pathname and returns information about
  * the match.
  *
  * @see https://reactrouter.com/api/matchPath
  */
-
 function matchPath(pattern, pathname) {
   if (typeof pattern === "string") {
     pattern = {
@@ -729,14 +767,23 @@ function matchPath(pattern, pathname) {
   let match = pathname.match(matcher);
   if (!match) return null;
   let matchedPathname = match[0];
-  let values = match.slice(1);
+  let pathnameBase = matchedPathname.replace(/(.)\/+$/, "$1");
+  let captureGroups = match.slice(1);
   let params = paramNames.reduce((memo, paramName, index) => {
-    memo[paramName] = safelyDecodeURIComponent(values[index] || "", paramName);
+    // We need to compute the pathnameBase here using the raw splat value
+    // instead of using params["*"] later because it will be decoded then
+    if (paramName === "*") {
+      let splatValue = captureGroups[index] || "";
+      pathnameBase = matchedPathname.slice(0, matchedPathname.length - splatValue.length).replace(/(.)\/+$/, "$1");
+    }
+
+    memo[paramName] = safelyDecodeURIComponent(captureGroups[index] || "", paramName);
     return memo;
   }, {});
   return {
     params,
     pathname: matchedPathname,
+    pathnameBase,
     pattern
   };
 }
@@ -750,35 +797,30 @@ function compilePath(path, caseSensitive, end) {
     end = true;
   }
 
-  let keys = [];
-  let source = "^" + path.replace(/\/?\*?$/, "") // Ignore trailing / and /*, we'll handle it below
+  process.env.NODE_ENV !== "production" ? warning(path === "*" || !path.endsWith("*") || path.endsWith("/*"), "Route path \"" + path + "\" will be treated as if it were " + ("\"" + path.replace(/\*$/, "/*") + "\" because the `*` character must ") + "always follow a `/` in the pattern. To get rid of this warning, " + ("please change the route path to \"" + path.replace(/\*$/, "/*") + "\".")) : void 0;
+  let paramNames = [];
+  let regexpSource = "^" + path.replace(/\/*\*?$/, "") // Ignore trailing / and /*, we'll handle it below
   .replace(/^\/*/, "/") // Make sure it has a leading /
   .replace(/[\\.*+^$?{}|()[\]]/g, "\\$&") // Escape special regex chars
-  .replace(/:(\w+)/g, (_, key) => {
-    keys.push(key);
+  .replace(/:(\w+)/g, (_, paramName) => {
+    paramNames.push(paramName);
     return "([^\\/]+)";
   });
 
   if (path.endsWith("*")) {
-    if (path.endsWith("/*")) {
-      source += "(?:\\/(.+)|\\/?)$"; // Don't include the / in params['*']
-    } else {
-      source += "(.*)$";
-    }
-
-    keys.push("*");
-  } else if (end) {
-    // When matching to the end, ignore trailing slashes.
-    source += "\\/?$";
+    paramNames.push("*");
+    regexpSource += path === "*" || path === "/*" ? "(.*)$" // Already matched the initial /, just match the rest
+    : "(?:\\/(.+)|\\/*)$"; // Don't include the / in params["*"]
   } else {
-    // If not matching to the end (as parent routes do), at least match a word
-    // boundary. This restricts a parent route to matching only its own words
-    // and nothing more, e.g. parent route "/home" should not match "/home2".
-    source += "(?:\\b|$)";
+    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
+    // route "/home" should not match "/home2".
+    "(?:\\b|$)";
   }
 
-  let matcher = new RegExp(source, caseSensitive ? undefined : "i");
-  return [matcher, keys];
+  let matcher = new RegExp(regexpSource, caseSensitive ? undefined : "i");
+  return [matcher, paramNames];
 }
 
 function safelyDecodeURIComponent(value, paramName) {
@@ -828,17 +870,48 @@ function resolvePathname(relativePath, fromPathname) {
   return segments.length > 1 ? segments.join("/") : "/";
 }
 
-function resolveTo(to, routePathname, locationPathname) {
-  return resolvePath(to, // If a pathname is explicitly provided in `to`, it should be
-  // relative to the route context. This is explained in `Note on
-  // `<Link to>` values` in our migration guide from v5 as a means of
-  // disambiguation between `to` values that begin with `/` and those
-  // that do not. However, this is problematic for `to` values that do
-  // not provide a pathname. `to` can simply be a search or hash
-  // string, in which case we should assume that the navigation is
-  // relative to the current location's pathname and *not* the
-  // route pathname.
-  getToPathname(to) == null ? locationPathname : routePathname);
+function resolveTo(toArg, routePathnames, locationPathname) {
+  let to = typeof toArg === "string" ? parsePath(toArg) : toArg;
+  let toPathname = toArg === "" || to.pathname === "" ? "/" : to.pathname; // If a pathname is explicitly provided in `to`, it should be relative to the
+  // route context. This is explained in `Note on `<Link to>` values` in our
+  // migration guide from v5 as a means of disambiguation between `to` values
+  // that begin with `/` and those that do not. However, this is problematic for
+  // `to` values that do not provide a pathname. `to` can simply be a search or
+  // hash string, in which case we should assume that the navigation is relative
+  // to the current location's pathname and *not* the route pathname.
+
+  let from;
+
+  if (toPathname == null) {
+    from = locationPathname;
+  } else {
+    let routePathnameIndex = routePathnames.length - 1;
+
+    if (toPathname.startsWith("..")) {
+      let toSegments = toPathname.split("/"); // Each leading .. segment means "go up one route" instead of "go up one
+      // URL segment".  This is a key difference from how <a href> works and a
+      // major reason we call this a "to" value instead of a "href".
+
+      while (toSegments[0] === "..") {
+        toSegments.shift();
+        routePathnameIndex -= 1;
+      }
+
+      to.pathname = toSegments.join("/");
+    } // If there are more ".." segments than parent routes, resolve relative to
+    // the root / URL.
+
+
+    from = routePathnameIndex >= 0 ? routePathnames[routePathnameIndex] : "/";
+  }
+
+  let path = resolvePath(to, from); // Ensure the pathname has a trailing slash if the original to value had one.
+
+  if (toPathname && toPathname !== "/" && toPathname.endsWith("/") && !path.pathname.endsWith("/")) {
+    path.pathname += "/";
+  }
+
+  return path;
 }
 
 function getToPathname(to) {
@@ -846,16 +919,6 @@ function getToPathname(to) {
   return to === "" || to.pathname === "" ? "/" : typeof to === "string" ? parsePath(to).pathname : to.pathname;
 }
 
-function getPathnameStart(pathname, params) {
-  let splat = params["*"];
-  if (!splat) return pathname;
-  let pathnameStart = pathname.slice(0, -splat.length);
-  if (splat.startsWith("/")) return pathnameStart;
-  let index = pathnameStart.lastIndexOf("/");
-  if (index > 0) return pathnameStart.slice(0, index);
-  return "/";
-}
-
 function stripBasename(pathname, basename) {
   if (basename === "/") return pathname;
 
@@ -881,5 +944,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, useBlocker, 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, useParams, useResolvedPath, useRoutes };
 //# sourceMappingURL=index.js.map