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

package/README.md

@@ -2,9 +2,9 @@
 
 The `react-router` package is the heart of [React Router](/) and provides all
 the core functionality for both
-[`react-router-dom`](https://github.com/ReactTraining/react-router/packages/react-router-dom)
+[`react-router-dom`](/packages/react-router-dom)
 and
-[`react-router-native`](https://github.com/ReactTraining/react-router/packages/react-router-native).
+[`react-router-native`](/packages/react-router-native).
 
 If you're using React Router, you should never `import` anything directly from
 the `react-router` package, but you should have everything you need in either

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,23 +10,25 @@ 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">;
-declare const NavigatorContext: React.Context<Navigator>;
-declare const LocationContext: React.Context<LocationContextObject>;
-interface LocationContextObject {
-    action?: Action;
-    location?: Location;
+export declare type Navigator = Omit<History, "action" | "location" | "back" | "forward" | "listen" | "block">;
+interface NavigationContextObject {
+    basename: string;
+    navigator: Navigator;
     static: boolean;
 }
-declare const RouteContext: React.Context<RouteContextObject>;
+declare const NavigationContext: React.Context<NavigationContextObject>;
+interface LocationContextObject {
+    action: Action;
+    location: Location;
+}
+declare const LocationContext: React.Context<LocationContextObject>;
 interface RouteContextObject {
     outlet: React.ReactElement | null;
-    params: Params;
-    pathname: string;
-    basename: string;
-    route: RouteObject | null;
+    matches: RouteMatch[];
 }
+declare const RouteContext: React.Context<RouteContextObject>;
 export interface MemoryRouterProps {
+    basename?: string;
     children?: React.ReactNode;
     initialEntries?: InitialEntry[];
     initialIndex?: number;
@@ -36,7 +38,7 @@ export interface MemoryRouterProps {
  *
  * @see https://reactrouter.com/api/MemoryRouter
  */
-export declare function MemoryRouter({ children, initialEntries, initialIndex }: MemoryRouterProps): React.ReactElement;
+export declare function MemoryRouter({ basename, children, initialEntries, initialIndex }: MemoryRouterProps): React.ReactElement;
 export interface NavigateProps {
     to: To;
     replace?: boolean;
@@ -64,18 +66,35 @@ export interface RouteProps {
     caseSensitive?: boolean;
     children?: React.ReactNode;
     element?: React.ReactElement | null;
+    index?: boolean;
     path?: string;
 }
+export interface PathRouteProps {
+    caseSensitive?: boolean;
+    children?: React.ReactNode;
+    element?: React.ReactElement | null;
+    index?: false;
+    path: string;
+}
+export interface LayoutRouteProps {
+    children?: React.ReactNode;
+    element?: React.ReactElement | null;
+}
+export interface IndexRouteProps {
+    element?: React.ReactElement | null;
+    index: true;
+}
 /**
  * Declares an element that should be rendered at a certain URL path.
  *
  * @see https://reactrouter.com/api/Route
  */
-export declare function Route({ element }: RouteProps): React.ReactElement | null;
+export declare function Route(_props: PathRouteProps | LayoutRouteProps | IndexRouteProps): React.ReactElement | null;
 export interface RouterProps {
     action?: Action;
+    basename?: string;
     children?: React.ReactNode;
-    location: Location;
+    location: Partial<Location> | string;
     navigator: Navigator;
     static?: boolean;
 }
@@ -88,14 +107,10 @@ export interface RouterProps {
  *
  * @see https://reactrouter.com/api/Router
  */
-export declare function Router({ children, action, location, navigator, static: staticProp }: RouterProps): React.ReactElement;
-interface PartialLocation<S extends State = State> extends Omit<Partial<Location<S>>, "pathname"> {
-    pathname: string;
-}
+export declare function Router({ action, basename: basenameProp, children, location: locationProp, navigator, static: staticProp }: RouterProps): React.ReactElement | null;
 export interface RoutesProps {
-    basename?: string;
     children?: React.ReactNode;
-    location?: PartialLocation;
+    location?: Partial<Location> | string;
 }
 /**
  * A container for a nested tree of <Route> elements that renders the branch
@@ -103,14 +118,7 @@ export interface RoutesProps {
  *
  * @see https://reactrouter.com/api/Routes
  */
-export declare function Routes({ basename, 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;
+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.
@@ -142,12 +150,7 @@ export declare function useLocation(): Location;
  *
  * @see https://reactrouter.com/api/useMatch
  */
-export declare function useMatch(pattern: PathPattern): PathMatch | null;
-declare type PathPattern = string | {
-    path: string;
-    caseSensitive?: boolean;
-    end?: boolean;
-};
+export declare function useMatch<ParamKey extends string = string>(pattern: PathPattern | string): PathMatch<ParamKey> | null;
 /**
  * The interface for the navigate() function returned from useNavigate().
  */
@@ -179,7 +182,7 @@ export declare function useOutlet(): React.ReactElement | null;
  *
  * @see https://reactrouter.com/api/useParams
  */
-export declare function useParams(): Params;
+export declare function useParams<Key extends string = string>(): Readonly<Params<Key>>;
 /**
  * Resolves the pathname of the given `to` value against the current location.
  *
@@ -194,17 +197,7 @@ export declare function useResolvedPath(to: To): Path;
  *
  * @see https://reactrouter.com/api/useRoutes
  */
-export declare function useRoutes(partialRoutes: PartialRouteObject[], { basename, location }?: {
-    basename?: string;
-    location?: PartialLocation;
-}): React.ReactElement | null;
-/**
- * Creates a route config from an array of JavaScript objects. Used internally
- * by `useRoutes` to normalize the route config.
- *
- * @see https://reactrouter.com/api/createRoutesFromArray
- */
-export declare function createRoutesFromArray(array: PartialRouteObject[]): RouteObject[];
+export declare function useRoutes(routes: RouteObject[], locationArg?: Partial<Location> | string): React.ReactElement | null;
 /**
  * Creates a route config from a React "children" object, which is usually
  * either a `<Route>` element or an array of them. Used internally by
@@ -216,26 +209,18 @@ export declare function createRoutesFromChildren(children: React.ReactNode): Rou
 /**
  * The parameters that were parsed from the URL path.
  */
-export declare type Params = Record<string, string>;
+export declare type Params<Key extends string = string> = {
+    readonly [key in Key]: string | undefined;
+};
 /**
  * A route object represents a logical route, with (optionally) its child
  * routes organized in a tree-like structure.
  */
 export interface RouteObject {
-    caseSensitive: boolean;
-    children?: RouteObject[];
-    element: React.ReactNode;
-    path: string;
-}
-/**
- * A "partial route" object is usually supplied by the user and may omit
- * certain properties of a real route object such as `path` and `element`,
- * which have reasonable defaults.
- */
-export interface PartialRouteObject {
     caseSensitive?: boolean;
-    children?: PartialRouteObject[];
+    children?: RouteObject[];
     element?: React.ReactNode;
+    index?: boolean;
     path?: string;
 }
 /**
@@ -244,16 +229,77 @@ export interface PartialRouteObject {
  * @see https://reactrouter.com/api/generatePath
  */
 export declare function generatePath(path: string, params?: Params): string;
+/**
+ * A RouteMatch contains info about how a route matched a URL.
+ */
+export interface RouteMatch<ParamKey extends string = string> {
+    /**
+     * The names and values of dynamic parameters in the URL.
+     */
+    params: Params<ParamKey>;
+    /**
+     * The portion of the URL pathname that was matched.
+     */
+    pathname: string;
+    /**
+     * The portion of the URL pathname that was matched before child routes.
+     */
+    pathnameBase: string;
+    /**
+     * The route object that was used to match.
+     */
+    route: RouteObject;
+}
 /**
  * Matches the given routes to a location and returns the match data.
  *
  * @see https://reactrouter.com/api/matchRoutes
  */
-export declare function matchRoutes(routes: PartialRouteObject[], location: string | Partial<Location>, basename?: string): RouteMatch[] | null;
-export interface RouteMatch {
-    route: RouteObject;
+export declare function matchRoutes(routes: RouteObject[], locationArg: Partial<Location> | string, basename?: string): RouteMatch[] | null;
+/**
+ * Renders the result of `matchRoutes()` into a React element.
+ */
+export declare function renderMatches(matches: RouteMatch[] | null): React.ReactElement | null;
+/**
+ * A PathPattern is used to match on some portion of a URL pathname.
+ */
+export interface PathPattern {
+    /**
+     * A string to match against a URL pathname. May contain `:id`-style segments
+     * to indicate placeholders for dynamic parameters. May also end with `/*` to
+     * indicate matching the rest of the URL pathname.
+     */
+    path: string;
+    /**
+     * Should be `true` if the static portions of the `path` should be matched in
+     * the same case.
+     */
+    caseSensitive?: boolean;
+    /**
+     * Should be `true` if this pattern should match the entire URL pathname.
+     */
+    end?: boolean;
+}
+/**
+ * A PathMatch contains info about how a PathPattern matched on a URL pathname.
+ */
+export interface PathMatch<ParamKey extends string = string> {
+    /**
+     * The names and values of dynamic parameters in the URL.
+     */
+    params: Params<ParamKey>;
+    /**
+     * The portion of the URL pathname that was matched.
+     */
     pathname: string;
-    params: Params;
+    /**
+     * The portion of the URL pathname that was matched before child routes.
+     */
+    pathnameBase: string;
+    /**
+     * The pattern that was used to match.
+     */
+    pattern: PathPattern;
 }
 /**
  * Performs pattern matching on a URL pathname and returns information about
@@ -261,16 +307,12 @@ export interface RouteMatch {
  *
  * @see https://reactrouter.com/api/matchPath
  */
-export declare function matchPath(pattern: PathPattern, pathname: string): PathMatch | null;
-export interface PathMatch {
-    path: string;
-    pathname: string;
-    params: Params;
-}
+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
  */
-export declare function resolvePath(to: To, fromPathname?: string, basename?: string): Path;
-export {};
+export declare function resolvePath(to: To, fromPathname?: string): Path;
+/** @internal */
+export { NavigationContext as UNSAFE_NavigationContext, LocationContext as UNSAFE_LocationContext, RouteContext as UNSAFE_RouteContext };