react-router 6.0.0-beta.6 → 6.0.1

package/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.
  *
@@ -67,10 +67,7 @@ const LocationContext = /*#__PURE__*/createContext(null);
 
 const RouteContext = /*#__PURE__*/createContext({
   outlet: null,
-  params: {},
-  pathname: "/",
-  pathnameBase: "/",
-  route: null
+  matches: []
 });
 
 {
@@ -83,7 +80,7 @@ const RouteContext = /*#__PURE__*/createContext({
 /**
  * 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({
   basename,
@@ -109,8 +106,8 @@ function MemoryRouter({
   return /*#__PURE__*/createElement(Router, {
     basename: basename,
     children: children,
-    action: state.action,
     location: state.location,
+    navigationType: state.action,
     navigator: history
   });
 }
@@ -122,7 +119,7 @@ function MemoryRouter({
  * 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({
   to,
@@ -146,7 +143,7 @@ function Navigate({
 /**
  * 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();
@@ -155,7 +152,7 @@ function Outlet(_props) {
 /**
  * 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>.`)  ;
@@ -168,13 +165,13 @@ 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({
-  action = Action.Pop,
   basename: basenameProp = "/",
   children = null,
   location: locationProp,
+  navigationType = Action.Pop,
   navigator,
   static: staticProp = false
 }) {
@@ -223,8 +220,8 @@ function Router({
   }, /*#__PURE__*/createElement(LocationContext.Provider, {
     children: children,
     value: {
-      action,
-      location
+      location,
+      navigationType
     }
   }));
 }
@@ -233,7 +230,7 @@ function Router({
  * 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({
   children,
@@ -244,44 +241,11 @@ function Routes({
 // 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 = 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
-  } = useContext(NavigationContext);
-  useEffect(() => {
-    if (!when) return;
-    let unblock = navigator.block(tx => {
-      let autoUnblockingTx = { ...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) {
@@ -292,20 +256,29 @@ 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>.
  *
- * @see https://reactrouter.com/api/useInRouterContext
+ * @see https://reactrouter.com/docs/en/v6/api#useinroutercontext
  */
 
 function useInRouterContext() {
@@ -319,7 +292,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() {
@@ -328,12 +301,22 @@ function useLocation() {
   `useLocation() may be used only in the context of a <Router> component.`)  : 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) {
@@ -350,7 +333,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() ?  invariant(false, // TODO: This error is probably because they somehow have 2 versions of the
@@ -361,11 +344,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;
@@ -379,21 +363,21 @@ 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;
 }
 /**
  * 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() {
@@ -403,26 +387,31 @@ function useOutlet() {
  * 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 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.
  *
- * @see https://reactrouter.com/api/useResolvedPath
+ * @see https://reactrouter.com/docs/en/v6/api#useresolvedpath
  */
 
 function useResolvedPath(to) {
   let {
-    pathname: routePathname
+    matches
   } = useContext(RouteContext);
   let {
     pathname: locationPathname
   } = useLocation();
-  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
@@ -430,7 +419,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) {
@@ -438,11 +427,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.`)  : void 0;
   let {
-    params: parentParams,
-    pathname: parentPathname,
-    pathnameBase: parentPathnameBase,
-    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;
 
   {
     // You won't get a warning about 2 different <Routes> under a <Route>
@@ -488,13 +479,14 @@ function useRoutes(routes, locationArg) {
 
   {
      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
 ///////////////////////////////////////////////////////////////////////////////
@@ -504,7 +496,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) {
@@ -522,6 +514,7 @@ function createRoutesFromChildren(children) {
       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,
@@ -544,7 +537,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 = {}) {
   return path.replace(/:(\w+)/g, (_, key) => {
@@ -559,7 +552,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 = "/") {
   let location = typeof locationArg === "string" ? parsePath(locationArg) : locationArg;
@@ -611,7 +604,7 @@ function flattenRoutes(routes, branches = [], parentsMeta = [], parentPath = "")
 
     branches.push({
       path,
-      score: computeScore(path),
+      score: computeScore(path, route.index),
       routesMeta
     });
   });
@@ -624,14 +617,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;
 
@@ -639,6 +633,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);
 }
 
@@ -681,7 +679,11 @@ routesArg, pathname) {
       pathnameBase: joinPaths([matchedPathname, match.pathnameBase]),
       route
     });
-    matchedPathname = joinPaths([matchedPathname, match.pathnameBase]);
+
+    if (match.pathnameBase !== "/") {
+      matchedPathname = joinPaths([matchedPathname, match.pathnameBase]);
+    }
+
     routes = route.children;
   }
 
@@ -693,16 +695,17 @@ routesArg, pathname) {
 
 
 function renderMatches(matches) {
+  return _renderMatches(matches);
+}
+
+function _renderMatches(matches, 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,
-        pathnameBase: match.pathnameBase,
-        route: match.route
+        matches: parentMatches.concat(matches.slice(0, index + 1))
       }
     });
   }, null);
@@ -711,11 +714,12 @@ function renderMatches(matches) {
  * 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") {
@@ -789,7 +793,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
  */
 
 
@@ -821,17 +825,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) {
@@ -864,5 +899,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=react-router.development.js.map