react-router 6.0.0-beta.7 → 6.0.2

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.
  *
@@ -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,7 +52,7 @@ 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 {
@@ -59,7 +60,7 @@ export interface OutletProps {
 /**
  * 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 interface RouteProps {
@@ -87,14 +88,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 +106,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 +117,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,15 +141,22 @@ 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;
+/**
+ * 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;
 /**
@@ -160,33 +168,33 @@ 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 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;
 /**
  * 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>>;
 /**
  * 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 +203,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 +211,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 +234,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 +261,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;
 /**
@@ -305,13 +313,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;
 /**
  * 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.7
+ * React Router v6.0.2
  *
  * 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,7 +145,7 @@ 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();
@@ -154,7 +154,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) {
    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) {
@@ -260,20 +260,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() {
@@ -287,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() {
@@ -296,12 +305,22 @@ 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) {
@@ -318,7 +337,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
@@ -366,7 +385,7 @@ function useNavigate() {
  * 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() {
@@ -376,7 +395,7 @@ 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() {
@@ -389,7 +408,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) {
@@ -408,7 +427,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) {
@@ -470,12 +489,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 !== 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
@@ -486,7 +506,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) {
@@ -504,6 +524,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,
@@ -526,7 +547,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) {
@@ -545,7 +566,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) {
@@ -613,7 +634,7 @@ function flattenRoutes(routes, branches, parentsMeta, parentPath) {
 
     branches.push({
       path,
-      score: computeScore(path),
+      score: computeScore(path, route.index),
       routesMeta
     });
   });
@@ -626,14 +647,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;
 
@@ -641,6 +663,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);
 }
 
@@ -710,7 +736,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))
@@ -727,7 +753,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") {
@@ -809,7 +835,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
  */
 
 
@@ -919,5 +945,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, useParams, useResolvedPath, useRoutes };
 //# sourceMappingURL=index.js.map