react-router 6.0.0-beta.6 → 6.0.1

package/umd/react-router.development.js

@@ -1,5 +1,5 @@
 /**
- * React Router v6.0.0-beta.6
+ * React Router v6.0.1
  *
  * Copyright (c) Remix Software Inc.
  *
@@ -14,24 +14,6 @@
   (global = global || self, factory(global.ReactRouter = {}, global.React, global.HistoryLibrary));
 }(this, (function (exports, React, history) { 'use strict';
 
-  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);
   }
@@ -88,10 +70,7 @@
 
   const RouteContext = /*#__PURE__*/React.createContext({
     outlet: null,
-    params: {},
-    pathname: "/",
-    pathnameBase: "/",
-    route: null
+    matches: []
   });
 
   {
@@ -104,7 +83,7 @@
   /**
    * 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 {
@@ -131,8 +110,8 @@
     return /*#__PURE__*/React.createElement(Router, {
       basename: basename,
       children: children,
-      action: state.action,
       location: state.location,
+      navigationType: state.action,
       navigator: history$1
     });
   }
@@ -144,7 +123,7 @@
    * 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 {
@@ -169,7 +148,7 @@
   /**
    * 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();
@@ -178,7 +157,7 @@
   /**
    * 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) {
       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>.")  ;
@@ -191,14 +170,14 @@
    * 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 = history.Action.Pop,
       basename: basenameProp = "/",
       children = null,
       location: locationProp,
+      navigationType = history.Action.Pop,
       navigator,
       static: staticProp = false
     } = _ref3;
@@ -247,8 +226,8 @@
     }, /*#__PURE__*/React.createElement(LocationContext.Provider, {
       children: children,
       value: {
-        action,
-        location
+        location,
+        navigationType
       }
     }));
   }
@@ -257,7 +236,7 @@
    * 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 {
@@ -269,48 +248,11 @@
   // 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() ?  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.")  : void 0;
-    let {
-      navigator
-    } = React.useContext(NavigationContext);
-    React.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.
    *
-   * @see https://reactrouter.com/api/useHref
+   * @see https://reactrouter.com/docs/en/v6/api#usehref
    */
 
   function useHref(to) {
@@ -321,20 +263,29 @@
       basename,
       navigator
     } = React.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>.
    *
-   * @see https://reactrouter.com/api/useInRouterContext
+   * @see https://reactrouter.com/docs/en/v6/api#useinroutercontext
    */
 
   function useInRouterContext() {
@@ -348,7 +299,7 @@
    * "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() {
@@ -357,12 +308,22 @@
     "useLocation() may be used only in the context of a <Router> component.")  : void 0;
     return React.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 React.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) {
@@ -379,7 +340,7 @@
    * 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() ?  invariant(false, // TODO: This error is probably because they somehow have 2 versions of the
@@ -390,11 +351,12 @@
       navigator
     } = React.useContext(NavigationContext);
     let {
-      pathname: routePathname
+      matches
     } = React.useContext(RouteContext);
     let {
       pathname: locationPathname
     } = useLocation();
+    let routePathnamesJson = JSON.stringify(matches.map(match => match.pathnameBase));
     let activeRef = React.useRef(false);
     React.useEffect(() => {
       activeRef.current = true;
@@ -412,21 +374,21 @@
         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;
   }
   /**
    * 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() {
@@ -436,26 +398,31 @@
    * 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() {
-    return React.useContext(RouteContext).params;
+    let {
+      matches
+    } = React.useContext(RouteContext);
+    let routeMatch = matches[matches.length - 1];
+    return routeMatch ? routeMatch.params : {};
   }
   /**
    * 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) {
     let {
-      pathname: routePathname
+      matches
     } = React.useContext(RouteContext);
     let {
       pathname: locationPathname
     } = useLocation();
-    return React.useMemo(() => resolveTo(to, routePathname, locationPathname), [to, routePathname, locationPathname]);
+    let routePathnamesJson = JSON.stringify(matches.map(match => match.pathnameBase));
+    return React.useMemo(() => resolveTo(to, JSON.parse(routePathnamesJson), locationPathname), [to, routePathnamesJson, locationPathname]);
   }
   /**
    * Returns the element of the route that matched the current location, prepared
@@ -463,7 +430,7 @@
    * 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) {
@@ -471,11 +438,13 @@
     // router loaded. We can help them understand how to avoid that.
     "useRoutes() may be used only in the context of a <Router> component.")  : void 0;
     let {
-      params: parentParams,
-      pathname: parentPathname,
-      pathnameBase: parentPathnameBase,
-      route: parentRoute
+      matches: parentMatches
     } = React.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;
 
     {
       // You won't get a warning about 2 different <Routes> under a <Route>
@@ -523,13 +492,14 @@
 
     {
        warning(parentRoute || matches != null, "No routes matched location \"" + location.pathname + location.search + location.hash + "\" ") ;
+       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.") ;
     }
 
-    return renderMatches(matches && matches.map(match => Object.assign({}, match, {
+    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
   ///////////////////////////////////////////////////////////////////////////////
@@ -539,7 +509,7 @@
    * 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) {
@@ -557,6 +527,7 @@
         return;
       }
 
+      !(element.type === Route) ?  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>")  : void 0;
       let route = {
         caseSensitive: element.props.caseSensitive,
         element: element.props.element,
@@ -579,7 +550,7 @@
   /**
    * 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) {
@@ -598,7 +569,7 @@
   /**
    * 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) {
@@ -666,7 +637,7 @@
 
       branches.push({
         path,
-        score: computeScore(path),
+        score: computeScore(path, route.index),
         routesMeta
       });
     });
@@ -679,14 +650,15 @@
   }
 
   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;
 
@@ -694,6 +666,10 @@
       initialScore += splatPenalty;
     }
 
+    if (index) {
+      initialScore += indexRouteValue;
+    }
+
     return segments.filter(s => !isSplat(s)).reduce((score, segment) => score + (paramRe.test(segment) ? dynamicSegmentValue : segment === "" ? emptySegmentValue : staticSegmentValue), initialScore);
   }
 
@@ -736,7 +712,11 @@
         pathnameBase: joinPaths([matchedPathname, match.pathnameBase]),
         route
       });
-      matchedPathname = joinPaths([matchedPathname, match.pathnameBase]);
+
+      if (match.pathnameBase !== "/") {
+        matchedPathname = joinPaths([matchedPathname, match.pathnameBase]);
+      }
+
       routes = route.children;
     }
 
@@ -748,16 +728,21 @@
 
 
   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__*/React.createElement(RouteContext.Provider, {
-        children: match.route.element || /*#__PURE__*/React.createElement(Outlet, null),
+        children: match.route.element !== undefined ? match.route.element : /*#__PURE__*/React.createElement(Outlet, null),
         value: {
           outlet,
-          params: match.params,
-          pathname: match.pathname,
-          pathnameBase: match.pathnameBase,
-          route: match.route
+          matches: parentMatches.concat(matches.slice(0, index + 1))
         }
       });
     }, null);
@@ -766,11 +751,12 @@
    * 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
+   * @see https://reactrouter.com/docs/en/v6/api#matchpath
    */
   function matchPath(pattern, pathname) {
     if (typeof pattern === "string") {
@@ -852,7 +838,7 @@
   /**
    * 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
    */
 
 
@@ -888,17 +874,48 @@
     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" ? history.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) {
@@ -946,12 +963,12 @@
   exports.matchRoutes = matchRoutes;
   exports.renderMatches = renderMatches;
   exports.resolvePath = resolvePath;
-  exports.useBlocker = useBlocker;
   exports.useHref = useHref;
   exports.useInRouterContext = useInRouterContext;
   exports.useLocation = useLocation;
   exports.useMatch = useMatch;
   exports.useNavigate = useNavigate;
+  exports.useNavigationType = useNavigationType;
   exports.useOutlet = useOutlet;
   exports.useParams = useParams;
   exports.useResolvedPath = useResolvedPath;