react-router 6.0.0-beta.6 → 6.0.0-beta.7

package/index.d.ts

@@ -1,6 +1,6 @@
 import * as React from "react";
 import { Action } from "history";
-import type { Blocker, History, InitialEntry, Location, Path, State, To } from "history";
+import type { History, InitialEntry, Location, Path, State, To } from "history";
 /**
  * A Navigator is a "location changer"; it's how you get to different locations.
  *
@@ -10,7 +10,7 @@ import type { Blocker, History, InitialEntry, Location, Path, State, To } from "
  * 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">;
+export declare type Navigator = Omit<History, "action" | "location" | "back" | "forward" | "listen" | "block">;
 interface NavigationContextObject {
     basename: string;
     navigator: Navigator;
@@ -22,14 +22,11 @@ interface LocationContextObject {
     location: Location;
 }
 declare const LocationContext: React.Context<LocationContextObject>;
-interface RouteContextObject<ParamKey extends string = string> {
+interface RouteContextObject {
     outlet: React.ReactElement | null;
-    params: Readonly<Params<ParamKey>>;
-    pathname: string;
-    pathnameBase: string;
-    route: RouteObject | null;
+    matches: RouteMatch[];
 }
-declare const RouteContext: React.Context<RouteContextObject<string>>;
+declare const RouteContext: React.Context<RouteContextObject>;
 export interface MemoryRouterProps {
     basename?: string;
     children?: React.ReactNode;
@@ -122,13 +119,6 @@ export interface RoutesProps {
  * @see https://reactrouter.com/api/Routes
  */
 export declare function Routes({ children, location }: RoutesProps): React.ReactElement | null;
-/**
- * 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
- */
-export declare function useBlocker(blocker: Blocker, when?: boolean): void;
 /**
  * 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.

package/index.js

@@ -1,5 +1,5 @@
 /**
- * React Router v6.0.0-beta.6
+ * React Router v6.0.0-beta.7
  *
  * Copyright (c) Remix Software Inc.
  *
@@ -11,24 +11,6 @@
 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);
 }
@@ -85,10 +67,7 @@ if (process.env.NODE_ENV !== "production") {
 
 const RouteContext = /*#__PURE__*/createContext({
   outlet: null,
-  params: {},
-  pathname: "/",
-  pathnameBase: "/",
-  route: null
+  matches: []
 });
 
 if (process.env.NODE_ENV !== "production") {
@@ -266,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.
@@ -387,11 +329,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;
@@ -409,14 +352,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;
 }
 /**
@@ -437,7 +380,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.
@@ -447,12 +394,13 @@ function useParams() {
 
 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
@@ -468,11 +416,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,
-    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;
 
   if (process.env.NODE_ENV !== "production") {
     // You won't get a warning about 2 different <Routes> under a <Route>
@@ -522,11 +472,11 @@ function useRoutes(routes, locationArg) {
     process.env.NODE_ENV !== "production" ? warning(parentRoute || matches != null, "No routes matched location \"" + location.pathname + location.search + location.hash + "\" ") : void 0;
   }
 
-  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])
-  })));
+  })), parentMatches);
 } ///////////////////////////////////////////////////////////////////////////////
 // UTILS
 ///////////////////////////////////////////////////////////////////////////////
@@ -733,7 +683,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;
   }
 
@@ -745,16 +699,21 @@ 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),
       value: {
         outlet,
-        params: match.params,
-        pathname: match.pathname,
-        pathnameBase: match.pathnameBase,
-        route: match.route
+        matches: parentMatches.concat(matches.slice(0, index + 1))
       }
     });
   }, null);
@@ -763,6 +722,7 @@ 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.
@@ -885,17 +845,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) {
@@ -928,5 +919,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, useOutlet, useParams, useResolvedPath, useRoutes };
 //# sourceMappingURL=index.js.map