Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

react-router

Package Overview
Dependencies
Maintainers
3
Versions
555
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

react-router - npm Package Compare versions

Comparing version 0.0.0-nightly-1a96ee758-20240912 to 0.0.0-nightly-1fa84a4d4-20241025

dist/chunk-QKUFJ2WC.mjs

16

dist/dom-export.d.ts

@@ -1,3 +0,13 @@

export type { RouterProviderProps } from "./lib/dom-export/dom-router-provider";
export { RouterProvider } from "./lib/dom-export/dom-router-provider";
export { HydratedRouter } from "./lib/dom-export/hydrated-router";
import * as React from 'react';
import { R as RouterProviderProps$1 } from './fog-of-war-BijhfqFM.js';
import './types-BlYP8xpH.js';
type RouterProviderProps = Omit<RouterProviderProps$1, "flushSync">;
declare function RouterProvider(props: Omit<RouterProviderProps, "flushSync">): React.JSX.Element;
/**
* @category Router Components
*/
declare function HydratedRouter(): React.JSX.Element;
export { HydratedRouter, RouterProvider, type RouterProviderProps };

@@ -1,79 +0,839 @@

export type { InitialEntry, Location, Path, To } from "./lib/router/history";
export type { HydrationState, StaticHandler, GetScrollPositionFunction, GetScrollRestorationKeyFunction, StaticHandlerContext, Fetcher, Navigation, NavigationStates, RelativeRoutingType, Blocker, BlockerFunction, Router as RemixRouter, RouterState, RouterInit, RouterSubscriber, RouterNavigateOptions, RouterFetchOptions, RevalidationState, } from "./lib/router/router";
export type { ActionFunction, ActionFunctionArgs, DataStrategyFunction, DataStrategyFunctionArgs, DataStrategyMatch, DataStrategyResult, DataWithResponseInit as UNSAFE_DataWithResponseInit, ErrorResponse, FormEncType, FormMethod, HTMLFormMethod, JsonFunction, LazyRouteFunction, LoaderFunction, LoaderFunctionArgs, ParamParseKey, Params, PathMatch, PathParam, PathPattern, RedirectFunction, ShouldRevalidateFunction, ShouldRevalidateFunctionArgs, UIMatch, } from "./lib/router/utils";
export { Action as NavigationType, createPath, parsePath, } from "./lib/router/history";
export { IDLE_NAVIGATION, IDLE_FETCHER, IDLE_BLOCKER, } from "./lib/router/router";
export { data, generatePath, isRouteErrorResponse, json, matchPath, matchRoutes, redirect, redirectDocument, replace, resolvePath, } from "./lib/router/utils";
export type { DataRouteMatch, DataRouteObject, IndexRouteObject, NavigateOptions, Navigator, NonIndexRouteObject, PatchRoutesOnNavigationFunction, PatchRoutesOnNavigationFunctionArgs, RouteMatch, RouteObject, } from "./lib/context";
export type { AwaitProps, IndexRouteProps, LayoutRouteProps, MemoryRouterProps, NavigateProps, OutletProps, PathRouteProps, RouteProps, RouterProps, RouterProviderProps, RoutesProps, } from "./lib/components";
export type { NavigateFunction } from "./lib/hooks";
export { Await, MemoryRouter, Navigate, Outlet, Route, Router, RouterProvider, Routes, createMemoryRouter, createRoutesFromChildren, createRoutesFromChildren as createRoutesFromElements, renderMatches, } from "./lib/components";
export { useBlocker, useActionData, useAsyncError, useAsyncValue, useHref, useInRouterContext, useLoaderData, useLocation, useMatch, useMatches, useNavigate, useNavigation, useNavigationType, useOutlet, useOutletContext, useParams, useResolvedPath, useRevalidator, useRouteError, useRouteLoaderData, useRoutes, } from "./lib/hooks";
export type { BrowserRouterProps, HashRouterProps, HistoryRouterProps, LinkProps, NavLinkProps, NavLinkRenderProps, FetcherFormProps, FormProps, ScrollRestorationProps, SetURLSearchParams, SubmitFunction, FetcherSubmitFunction, FetcherWithComponents, } from "./lib/dom/lib";
export { createBrowserRouter, createHashRouter, BrowserRouter, HashRouter, Link, HistoryRouter as unstable_HistoryRouter, NavLink, Form, ScrollRestoration, useLinkClickHandler, useSearchParams, useSubmit, useFormAction, useFetcher, useFetchers, useBeforeUnload, usePrompt as unstable_usePrompt, useViewTransitionState as unstable_useViewTransitionState, } from "./lib/dom/lib";
export type { FetcherSubmitOptions, ParamKeyValuePair, SubmitOptions, URLSearchParamsInit, SubmitTarget, } from "./lib/dom/dom";
export { createSearchParams } from "./lib/dom/dom";
export type { StaticRouterProps, StaticRouterProviderProps, } from "./lib/dom/server";
export { createStaticHandler, createStaticRouter, StaticRouter, StaticRouterProvider, } from "./lib/dom/server";
export { Meta, Links, Scripts, PrefetchPageLinks, } from "./lib/dom/ssr/components";
export type { ScriptsProps } from "./lib/dom/ssr/components";
export type { EntryContext } from "./lib/dom/ssr/entry";
export type { ClientActionFunction, ClientActionFunctionArgs, ClientLoaderFunction, ClientLoaderFunctionArgs, MetaArgs, MetaDescriptor, MetaFunction, LinksFunction, } from "./lib/dom/ssr/routeModules";
export type { ServerRouterProps } from "./lib/dom/ssr/server";
export { ServerRouter } from "./lib/dom/ssr/server";
export type { RoutesTestStubProps } from "./lib/dom/ssr/routes-test-stub";
export { createRoutesStub } from "./lib/dom/ssr/routes-test-stub";
export { createCookie, isCookie } from "./lib/server-runtime/cookies";
export { composeUploadHandlers as unstable_composeUploadHandlers, parseMultipartFormData as unstable_parseMultipartFormData, } from "./lib/server-runtime/formData";
export { createRequestHandler } from "./lib/server-runtime/server";
export { createSession, createSessionStorage, isSession, } from "./lib/server-runtime/sessions";
export { createCookieSessionStorage } from "./lib/server-runtime/sessions/cookieStorage";
export { createMemorySessionStorage } from "./lib/server-runtime/sessions/memoryStorage";
export { createMemoryUploadHandler as unstable_createMemoryUploadHandler } from "./lib/server-runtime/upload/memoryUploadHandler";
export { MaxPartSizeExceededError } from "./lib/server-runtime/upload/errors";
export { setDevServerHooks as unstable_setDevServerHooks } from "./lib/server-runtime/dev";
export type { IsCookieFunction } from "./lib/server-runtime/cookies";
export type { CreateRequestHandlerFunction } from "./lib/server-runtime/server";
export type { IsSessionFunction } from "./lib/server-runtime/sessions";
export type { HandleDataRequestFunction, HandleDocumentRequestFunction, HandleErrorFunction, ServerBuild, ServerEntryModule, } from "./lib/server-runtime/build";
export type { UploadHandlerPart, UploadHandler, } from "./lib/server-runtime/formData";
export type { MemoryUploadHandlerOptions, MemoryUploadHandlerFilterArgs, } from "./lib/server-runtime/upload/memoryUploadHandler";
export type { Cookie, CookieOptions, CookieParseOptions, CookieSerializeOptions, CookieSignatureOptions, } from "./lib/server-runtime/cookies";
export type { AppLoadContext } from "./lib/server-runtime/data";
export type { PageLinkDescriptor, HtmlLinkDescriptor, LinkDescriptor, } from "./lib/router/links";
export type { TypedResponse } from "./lib/server-runtime/responses";
export type { DataFunctionArgs, HeadersArgs, HeadersFunction, } from "./lib/server-runtime/routeModules";
export type { RequestHandler } from "./lib/server-runtime/server";
export type { Session, SessionData, SessionIdStorageStrategy, SessionStorage, FlashSessionData, } from "./lib/server-runtime/sessions";
/** @internal */
export { createBrowserHistory as UNSAFE_createBrowserHistory, invariant as UNSAFE_invariant, } from "./lib/router/history";
/** @internal */
export { createRouter as UNSAFE_createRouter } from "./lib/router/router";
/** @internal */
export { ErrorResponseImpl as UNSAFE_ErrorResponseImpl } from "./lib/router/utils";
/** @internal */
export { DataRouterContext as UNSAFE_DataRouterContext, DataRouterStateContext as UNSAFE_DataRouterStateContext, FetchersContext as UNSAFE_FetchersContext, LocationContext as UNSAFE_LocationContext, NavigationContext as UNSAFE_NavigationContext, RouteContext as UNSAFE_RouteContext, ViewTransitionContext as UNSAFE_ViewTransitionContext, } from "./lib/context";
/** @internal */
export { mapRouteProperties as UNSAFE_mapRouteProperties } from "./lib/components";
/** @internal */
export { FrameworkContext as UNSAFE_FrameworkContext } from "./lib/dom/ssr/components";
/** @internal */
export type { AssetsManifest as UNSAFE_AssetsManifest } from "./lib/dom/ssr/entry";
/** @internal */
export { deserializeErrors as UNSAFE_deserializeErrors } from "./lib/dom/ssr/errors";
/** @internal */
export { RemixErrorBoundary as UNSAFE_RemixErrorBoundary } from "./lib/dom/ssr/errorBoundaries";
/** @internal */
export { getPatchRoutesOnNavigationFunction as UNSAFE_getPatchRoutesOnNavigationFunction, useFogOFWarDiscovery as UNSAFE_useFogOFWarDiscovery, } from "./lib/dom/ssr/fog-of-war";
/** @internal */
export type { RouteModules as UNSAFE_RouteModules } from "./lib/dom/ssr/routeModules";
/** @internal */
export { createClientRoutes as UNSAFE_createClientRoutes, createClientRoutesWithHMRRevalidationOptOut as UNSAFE_createClientRoutesWithHMRRevalidationOptOut, shouldHydrateRouteLoader as UNSAFE_shouldHydrateRouteLoader, } from "./lib/dom/ssr/routes";
/** @internal */
export { getSingleFetchDataStrategy as UNSAFE_getSingleFetchDataStrategy } from "./lib/dom/ssr/single-fetch";
/** @internal */
export { decodeViaTurboStream as UNSAFE_decodeViaTurboStream, SingleFetchRedirectSymbol as UNSAFE_SingleFetchRedirectSymbol, } from "./lib/dom/ssr/single-fetch";
/** @internal */
export { ServerMode as UNSAFE_ServerMode } from "./lib/server-runtime/mode";
/** @internal */
export { useScrollRestoration as UNSAFE_useScrollRestoration } from "./lib/dom/lib";
import { R as RouteModules, a as Router, D as DataStrategyFunction, A as ActionFunction, L as LoaderFunction, C as ClientActionFunction, b as ClientLoaderFunction, c as LinksFunction, M as MetaFunction, d as RouteManifest, e as AppLoadContext$1, f as LoaderFunctionArgs, g as ActionFunctionArgs, T as To, h as RelativeRoutingType, i as Location, j as Action, P as ParamParseKey, k as Path, l as PathPattern, m as PathMatch, N as NavigateOptions, n as Params, o as RouteObject, p as Navigation, q as RevalidationState, U as UIMatch, S as SerializeFrom, B as BlockerFunction, r as Blocker, s as StaticHandlerContext, t as StaticHandler, F as FutureConfig$1, u as CreateStaticHandlerOptions$1, I as InitialEntry, H as HydrationState, v as IndexRouteObject, w as NonIndexRouteObject, x as RouterState } from './types-BlYP8xpH.js';
export { aq as ClientActionFunctionArgs, ar as ClientLoaderFunctionArgs, ak as DataRouteMatch, al as DataRouteObject, V as DataStrategyFunctionArgs, W as DataStrategyMatch, X as DataStrategyResult, Z as ErrorResponse, z as Fetcher, _ as FormEncType, $ as FormMethod, G as GetScrollPositionFunction, y as GetScrollRestorationKeyFunction, a0 as HTMLFormMethod, av as HtmlLinkDescriptor, aa as IDLE_BLOCKER, a9 as IDLE_FETCHER, a8 as IDLE_NAVIGATION, a1 as LazyRouteFunction, aw as LinkDescriptor, as as MetaArgs, at as MetaDescriptor, E as NavigationStates, am as Navigator, au as PageLinkDescriptor, an as PatchRoutesOnNavigationFunction, ao as PatchRoutesOnNavigationFunctionArgs, a2 as PathParam, a3 as RedirectFunction, ap as RouteMatch, Q as RouterFetchOptions, J as RouterInit, O as RouterNavigateOptions, K as RouterSubscriber, a4 as ShouldRevalidateFunction, a5 as ShouldRevalidateFunctionArgs, aB as UNSAFE_DataRouterContext, aC as UNSAFE_DataRouterStateContext, Y as UNSAFE_DataWithResponseInit, aA as UNSAFE_ErrorResponseImpl, aD as UNSAFE_FetchersContext, aE as UNSAFE_LocationContext, aF as UNSAFE_NavigationContext, aG as UNSAFE_RouteContext, aH as UNSAFE_ViewTransitionContext, ax as UNSAFE_createBrowserHistory, az as UNSAFE_createRouter, ay as UNSAFE_invariant, a6 as createPath, ab as data, ac as generatePath, ad as isRouteErrorResponse, ae as matchPath, af as matchRoutes, a7 as parsePath, ag as redirect, ah as redirectDocument, ai as replace, aj as resolvePath } from './types-BlYP8xpH.js';
import { A as AssetsManifest, a as Route, F as FutureConfig, E as EntryContext } from './fog-of-war-BijhfqFM.js';
export { f as Await, b as AwaitProps, G as BrowserRouter, B as BrowserRouterProps, u as FetcherFormProps, y as FetcherSubmitFunction, a3 as FetcherSubmitOptions, z as FetcherWithComponents, U as Form, v as FormProps, J as HashRouter, H as HashRouterProps, p as HistoryRouterProps, I as IndexRouteProps, L as LayoutRouteProps, K as Link, q as LinkProps, aa as Links, g as MemoryRouter, M as MemoryRouterProps, a9 as Meta, T as NavLink, s as NavLinkProps, t as NavLinkRenderProps, h as Navigate, N as NavigateProps, i as Outlet, O as OutletProps, a4 as ParamKeyValuePair, P as PathRouteProps, ac as PrefetchPageLinks, j as Route, c as RouteProps, k as Router, d as RouterProps, l as RouterProvider, R as RouterProviderProps, m as Routes, e as RoutesProps, ab as Scripts, ad as ScriptsProps, V as ScrollRestoration, S as ScrollRestorationProps, w as SetURLSearchParams, x as SubmitFunction, a5 as SubmitOptions, a7 as SubmitTarget, af as UNSAFE_FrameworkContext, ai as UNSAFE_createClientRoutes, aj as UNSAFE_createClientRoutesWithHMRRevalidationOptOut, ag as UNSAFE_getPatchRoutesOnNavigationFunction, ae as UNSAFE_mapRouteProperties, ak as UNSAFE_shouldHydrateRouteLoader, ah as UNSAFE_useFogOFWarDiscovery, al as UNSAFE_useScrollRestoration, a6 as URLSearchParamsInit, C as createBrowserRouter, D as createHashRouter, n as createMemoryRouter, o as createRoutesFromChildren, o as createRoutesFromElements, a8 as createSearchParams, r as renderMatches, Q as unstable_HistoryRouter, a1 as unstable_usePrompt, a0 as useBeforeUnload, _ as useFetcher, $ as useFetchers, Z as useFormAction, W as useLinkClickHandler, X as useSearchParams, Y as useSubmit, a2 as useViewTransitionState } from './fog-of-war-BijhfqFM.js';
import * as React from 'react';
import { ReactElement } from 'react';
import { ParseOptions, SerializeOptions } from 'cookie';
export { ParseOptions as CookieParseOptions, SerializeOptions as CookieSerializeOptions } from 'cookie';
declare const SingleFetchRedirectSymbol: unique symbol;
declare function getSingleFetchDataStrategy(manifest: AssetsManifest, routeModules: RouteModules, getRouter: () => Router): DataStrategyFunction;
declare function decodeViaTurboStream(body: ReadableStream<Uint8Array>, global: Window | typeof globalThis): Promise<{
done: Promise<undefined>;
value: unknown;
}>;
/**
* The mode to use when running the server.
*/
declare enum ServerMode {
Development = "development",
Production = "production",
Test = "test"
}
type HeadersArgs = {
loaderHeaders: Headers;
parentHeaders: Headers;
actionHeaders: Headers;
errorHeaders: Headers | undefined;
};
/**
* A function that returns HTTP headers to be used for a route. These headers
* will be merged with (and take precedence over) headers from parent routes.
*/
interface HeadersFunction {
(args: HeadersArgs): Headers | HeadersInit;
}
/**
* An arbitrary object that is associated with a route.
*/
type RouteHandle = unknown;
interface EntryRouteModule {
clientAction?: ClientActionFunction;
clientLoader?: ClientLoaderFunction;
ErrorBoundary?: any;
HydrateFallback?: any;
Layout?: any;
default: any;
handle?: RouteHandle;
links?: LinksFunction;
meta?: MetaFunction;
}
interface ServerRouteModule extends EntryRouteModule {
action?: ActionFunction;
headers?: HeadersFunction | {
[name: string]: string;
};
loader?: LoaderFunction;
}
type ServerRouteManifest = RouteManifest<Omit<ServerRoute, "children">>;
interface ServerRoute extends Route {
children: ServerRoute[];
module: ServerRouteModule;
}
/**
* The output of the compiler for the server build.
*/
interface ServerBuild {
entry: {
module: ServerEntryModule;
};
routes: ServerRouteManifest;
assets: AssetsManifest;
basename?: string;
publicPath: string;
assetsBuildDirectory: string;
future: FutureConfig;
isSpaMode: boolean;
}
interface HandleDocumentRequestFunction {
(request: Request, responseStatusCode: number, responseHeaders: Headers, context: EntryContext, loadContext: AppLoadContext$1): Promise<Response> | Response;
}
interface HandleDataRequestFunction {
(response: Response, args: LoaderFunctionArgs | ActionFunctionArgs): Promise<Response> | Response;
}
interface HandleErrorFunction {
(error: unknown, args: LoaderFunctionArgs | ActionFunctionArgs): void;
}
/**
* A module that serves as the entry point for a Remix app during server
* rendering.
*/
interface ServerEntryModule {
default: HandleDocumentRequestFunction;
handleDataRequest?: HandleDataRequestFunction;
handleError?: HandleErrorFunction;
streamTimeout?: number;
}
/**
Resolves a URL against the current location.
```tsx
import { useHref } from "react-router"
function SomeComponent() {
let href = useHref("some/where");
// "/resolved/some/where"
}
```
@category Hooks
*/
declare function useHref(to: To, { relative }?: {
relative?: RelativeRoutingType;
}): string;
/**
* Returns true if this component is a descendant of a Router, useful to ensure
* a component is used within a Router.
*
* @category Hooks
*/
declare function useInRouterContext(): boolean;
/**
Returns the current {@link Location}. This can be useful if you'd like to perform some side effect whenever it changes.
```tsx
import * as React from 'react'
import { useLocation } from 'react-router'
function SomeComponent() {
let location = useLocation()
React.useEffect(() => {
// Google Analytics
ga('send', 'pageview')
}, [location]);
return (
// ...
);
}
```
@category Hooks
*/
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.
*
* @category Hooks
*/
declare function useNavigationType(): Action;
/**
* Returns a PathMatch object if the given pattern matches the current URL.
* This is useful for components that need to know "active" state, e.g.
* `<NavLink>`.
*
* @category Hooks
*/
declare function useMatch<ParamKey extends ParamParseKey<Path>, Path extends string>(pattern: PathPattern<Path> | Path): PathMatch<ParamKey> | null;
/**
* The interface for the navigate() function returned from useNavigate().
*/
interface NavigateFunction {
(to: To, options?: NavigateOptions): void | Promise<void>;
(delta: number): void | Promise<void>;
}
/**
Returns a function that lets you navigate programmatically in the browser in response to user interactions or effects.
```tsx
import { useNavigate } from "react-router";
function SomeComponent() {
let navigate = useNavigate();
return (
<button
onClick={() => {
navigate(-1);
}}
/>
);
}
```
It's often better to use {@link redirect} in {@link ActionFunction | actions} and {@link LoaderFunction | loaders} than this hook.
@category Hooks
*/
declare function useNavigate(): NavigateFunction;
/**
* Returns the parent route {@link OutletProps.context | `<Outlet context>`}.
*
* @category Hooks
*/
declare function useOutletContext<Context = unknown>(): Context;
/**
* Returns the element for the child route at this level of the route
* hierarchy. Used internally by `<Outlet>` to render child routes.
*
* @category Hooks
*/
declare function useOutlet(context?: unknown): React.ReactElement | null;
/**
Returns an object of key/value pairs of the dynamic params from the current URL that were matched by the routes. Child routes inherit all params from their parent routes.
```tsx
import { useParams } from "react-router"
function SomeComponent() {
let params = useParams()
params.postId
}
```
Assuming a route pattern like `/posts/:postId` is matched by `/posts/123` then `params.postId` will be `"123"`.
@category Hooks
*/
declare function useParams<ParamsOrKey extends string | Record<string, string | undefined> = string>(): Readonly<[
ParamsOrKey
] extends [string] ? Params<ParamsOrKey> : Partial<ParamsOrKey>>;
/**
Resolves the pathname of the given `to` value against the current location. Similar to {@link useHref}, but returns a {@link Path} instead of a string.
```tsx
import { useResolvedPath } from "react-router"
function SomeComponent() {
// if the user is at /dashboard/profile
let path = useResolvedPath("../accounts")
path.pathname // "/dashboard/accounts"
path.search // ""
path.hash // ""
}
```
@category Hooks
*/
declare function useResolvedPath(to: To, { relative }?: {
relative?: RelativeRoutingType;
}): Path;
/**
Hook version of {@link Routes | `<Routes>`} that uses objects instead of components. These objects have the same properties as the component props.
The return value of `useRoutes` is either a valid React element you can use to render the route tree, or `null` if nothing matched.
```tsx
import * as React from "react";
import { useRoutes } from "react-router";
function App() {
let element = useRoutes([
{
path: "/",
element: <Dashboard />,
children: [
{
path: "messages",
element: <DashboardMessages />,
},
{ path: "tasks", element: <DashboardTasks /> },
],
},
{ path: "team", element: <AboutPage /> },
]);
return element;
}
```
@category Hooks
*/
declare function useRoutes(routes: RouteObject[], locationArg?: Partial<Location> | string): React.ReactElement | null;
/**
Returns the current navigation, defaulting to an "idle" navigation when no navigation is in progress. You can use this to render pending UI (like a global spinner) or read FormData from a form navigation.
```tsx
import { useNavigation } from "react-router"
function SomeComponent() {
let navigation = useNavigation();
navigation.state
navigation.formData
// etc.
}
```
@category Hooks
*/
declare function useNavigation(): Navigation;
/**
Revalidate the data on the page for reasons outside of normal data mutations like window focus or polling on an interval.
```tsx
import { useRevalidator } from "react-router";
function WindowFocusRevalidator() {
const revalidator = useRevalidator();
useFakeWindowFocus(() => {
revalidator.revalidate();
});
return (
<div hidden={revalidator.state === "idle"}>
Revalidating...
</div>
);
}
```
Note that page data is already revalidated automatically after actions. If you find yourself using this for normal CRUD operations on your data in response to user interactions, you're probably not taking advantage of the other APIs like {@link useFetcher}, {@link Form}, {@link useSubmit} that do this automatically.
@category Hooks
*/
declare function useRevalidator(): {
revalidate(): Promise<void>;
state: RevalidationState;
};
/**
* Returns the active route matches, useful for accessing loaderData for
* parent/child routes or the route "handle" property
*
* @category Hooks
*/
declare function useMatches(): UIMatch[];
/**
Returns the data from the closest route {@link LoaderFunction | loader} or {@link ClientLoaderFunction | client loader}.
```tsx
import { useLoaderData } from "react-router"
export async function loader() {
return await fakeDb.invoices.findAll();
}
export default function Invoices() {
let invoices = useLoaderData<typeof loader>();
// ...
}
```
@category Hooks
*/
declare function useLoaderData<T = any>(): SerializeFrom<T>;
/**
Returns the loader data for a given route by route ID.
```tsx
import { useRouteLoaderData } from "react-router";
function SomeComponent() {
const { user } = useRouteLoaderData("root");
}
```
Route IDs are created automatically. They are simply the path of the route file relative to the app folder without the extension.
| Route Filename | Route ID |
| -------------------------- | -------------------- |
| `app/root.tsx` | `"root"` |
| `app/routes/teams.tsx` | `"routes/teams"` |
| `app/whatever/teams.$id.tsx` | `"whatever/teams.$id"` |
If you created an ID manually, you can use that instead:
```tsx
route("/", "containers/app.tsx", { id: "app" }})
```
@category Hooks
*/
declare function useRouteLoaderData<T = any>(routeId: string): SerializeFrom<T> | undefined;
/**
Returns the action data from the most recent POST navigation form submission or `undefined` if there hasn't been one.
```tsx
import { Form, useActionData } from "react-router"
export async function action({ request }) {
const body = await request.formData()
const name = body.get("visitorsName")
return { message: `Hello, ${name}` }
}
export default function Invoices() {
const data = useActionData()
return (
<Form method="post">
<input type="text" name="visitorsName" />
{data ? data.message : "Waiting..."}
</Form>
)
}
```
@category Hooks
*/
declare function useActionData<T = any>(): SerializeFrom<T> | undefined;
/**
Accesses the error thrown during an {@link ActionFunction | action}, {@link LoaderFunction | loader}, or component render to be used in a route module Error Boundary.
```tsx
export function ErrorBoundary() {
const error = useRouteError();
return <div>{error.message}</div>;
}
```
@category Hooks
*/
declare function useRouteError(): unknown;
/**
Returns the resolved promise value from the closest {@link Await | `<Await>`}.
```tsx
function SomeDescendant() {
const value = useAsyncValue();
// ...
}
// somewhere in your app
<Await resolve={somePromise}>
<SomeDescendant />
</Await>
```
@category Hooks
*/
declare function useAsyncValue(): unknown;
/**
Returns the rejection value from the closest {@link Await | `<Await>`}.
```tsx
import { Await, useAsyncError } from "react-router"
function ErrorElement() {
const error = useAsyncError();
return (
<p>Uh Oh, something went wrong! {error.message}</p>
);
}
// somewhere in your app
<Await
resolve={promiseThatRejects}
errorElement={<ErrorElement />}
/>
```
@category Hooks
*/
declare function useAsyncError(): unknown;
/**
* Allow the application to block navigations within the SPA and present the
* user a confirmation dialog to confirm the navigation. Mostly used to avoid
* using half-filled form data. This does not handle hard-reloads or
* cross-origin navigations.
*
* @category Hooks
*/
declare function useBlocker(shouldBlock: boolean | BlockerFunction): Blocker;
interface StaticRouterProps {
basename?: string;
children?: React.ReactNode;
location: Partial<Location> | string;
}
/**
* A `<Router>` that may not navigate to any other location. This is useful
* on the server where there is no stateful UI.
*
* @category Router Components
*/
declare function StaticRouter({ basename, children, location: locationProp, }: StaticRouterProps): React.JSX.Element;
interface StaticRouterProviderProps {
context: StaticHandlerContext;
router: Router;
hydrate?: boolean;
nonce?: string;
}
/**
* A Data Router that may not navigate to any other location. This is useful
* on the server where there is no stateful UI.
*
* @category Router Components
*/
declare function StaticRouterProvider({ context, router, hydrate, nonce, }: StaticRouterProviderProps): React.JSX.Element;
type CreateStaticHandlerOptions = Omit<CreateStaticHandlerOptions$1, "mapRouteProperties">;
/**
* @category Utils
*/
declare function createStaticHandler(routes: RouteObject[], opts?: CreateStaticHandlerOptions): StaticHandler;
/**
* @category Routers
*/
declare function createStaticRouter(routes: RouteObject[], context: StaticHandlerContext, opts?: {
future?: Partial<FutureConfig$1>;
}): Router;
interface ServerRouterProps {
context: EntryContext;
url: string | URL;
abortDelay?: number;
nonce?: string;
}
/**
* The entry point for a Remix app when it is rendered on the server (in
* `app/entry.server.js`). This component is used to generate the HTML in the
* response from the server.
*
* @category Components
*/
declare function ServerRouter({ context, url, abortDelay, nonce, }: ServerRouterProps): ReactElement;
interface StubIndexRouteObject extends Omit<IndexRouteObject, "loader" | "action" | "element" | "errorElement" | "children"> {
loader?: LoaderFunction;
action?: ActionFunction;
children?: StubRouteObject[];
meta?: MetaFunction;
links?: LinksFunction;
}
interface StubNonIndexRouteObject extends Omit<NonIndexRouteObject, "loader" | "action" | "element" | "errorElement" | "children"> {
loader?: LoaderFunction;
action?: ActionFunction;
children?: StubRouteObject[];
meta?: MetaFunction;
links?: LinksFunction;
}
type StubRouteObject = StubIndexRouteObject | StubNonIndexRouteObject;
interface AppLoadContext {
[key: string]: unknown;
}
interface RoutesTestStubProps {
/**
* The initial entries in the history stack. This allows you to start a test with
* multiple locations already in the history stack (for testing a back navigation, etc.)
* The test will default to the last entry in initialEntries if no initialIndex is provided.
* e.g. initialEntries={["/home", "/about", "/contact"]}
*/
initialEntries?: InitialEntry[];
/**
* The initial index in the history stack to render. This allows you to start a test at a specific entry.
* It defaults to the last entry in initialEntries.
* e.g.
* initialEntries: ["/", "/events/123"]
* initialIndex: 1 // start at "/events/123"
*/
initialIndex?: number;
/**
* Used to set the route's initial loader and action data.
* e.g. hydrationData={{
* loaderData: { "/contact": { locale: "en-US" } },
* actionData: { "/login": { errors: { email: "invalid email" } }}
* }}
*/
hydrationData?: HydrationState;
/**
* Future flags mimicking the settings in remix.config.js
*/
future?: Partial<FutureConfig>;
}
/**
* @category Utils
*/
declare function createRoutesStub(routes: StubRouteObject[], context?: AppLoadContext): ({ initialEntries, initialIndex, hydrationData, future, }: RoutesTestStubProps) => React.JSX.Element;
interface CookieSignatureOptions {
/**
* An array of secrets that may be used to sign/unsign the value of a cookie.
*
* The array makes it easy to rotate secrets. New secrets should be added to
* the beginning of the array. `cookie.serialize()` will always use the first
* value in the array, but `cookie.parse()` may use any of them so that
* cookies that were signed with older secrets still work.
*/
secrets?: string[];
}
type CookieOptions = ParseOptions & SerializeOptions & CookieSignatureOptions;
/**
* A HTTP cookie.
*
* A Cookie is a logical container for metadata about a HTTP cookie; its name
* and options. But it doesn't contain a value. Instead, it has `parse()` and
* `serialize()` methods that allow a single instance to be reused for
* parsing/encoding multiple different values.
*
* @see https://remix.run/utils/cookies#cookie-api
*/
interface Cookie {
/**
* The name of the cookie, used in the `Cookie` and `Set-Cookie` headers.
*/
readonly name: string;
/**
* True if this cookie uses one or more secrets for verification.
*/
readonly isSigned: boolean;
/**
* The Date this cookie expires.
*
* Note: This is calculated at access time using `maxAge` when no `expires`
* option is provided to `createCookie()`.
*/
readonly expires?: Date;
/**
* Parses a raw `Cookie` header and returns the value of this cookie or
* `null` if it's not present.
*/
parse(cookieHeader: string | null, options?: ParseOptions): Promise<any>;
/**
* Serializes the given value to a string and returns the `Set-Cookie`
* header.
*/
serialize(value: any, options?: SerializeOptions): Promise<string>;
}
/**
* Creates a logical container for managing a browser cookie from the server.
*/
declare const createCookie: (name: string, cookieOptions?: CookieOptions) => Cookie;
type IsCookieFunction = (object: any) => object is Cookie;
/**
* Returns true if an object is a Remix cookie container.
*
* @see https://remix.run/utils/cookies#iscookie
*/
declare const isCookie: IsCookieFunction;
type RequestHandler = (request: Request, loadContext?: AppLoadContext$1) => Promise<Response>;
type CreateRequestHandlerFunction = (build: ServerBuild | (() => ServerBuild | Promise<ServerBuild>), mode?: string) => RequestHandler;
declare const createRequestHandler: CreateRequestHandlerFunction;
/**
* An object of name/value pairs to be used in the session.
*/
interface SessionData {
[name: string]: any;
}
/**
* Session persists data across HTTP requests.
*
* @see https://remix.run/utils/sessions#session-api
*/
interface Session<Data = SessionData, FlashData = Data> {
/**
* A unique identifier for this session.
*
* Note: This will be the empty string for newly created sessions and
* sessions that are not backed by a database (i.e. cookie-based sessions).
*/
readonly id: string;
/**
* The raw data contained in this session.
*
* This is useful mostly for SessionStorage internally to access the raw
* session data to persist.
*/
readonly data: FlashSessionData<Data, FlashData>;
/**
* Returns `true` if the session has a value for the given `name`, `false`
* otherwise.
*/
has(name: (keyof Data | keyof FlashData) & string): boolean;
/**
* Returns the value for the given `name` in this session.
*/
get<Key extends (keyof Data | keyof FlashData) & string>(name: Key): (Key extends keyof Data ? Data[Key] : undefined) | (Key extends keyof FlashData ? FlashData[Key] : undefined) | undefined;
/**
* Sets a value in the session for the given `name`.
*/
set<Key extends keyof Data & string>(name: Key, value: Data[Key]): void;
/**
* Sets a value in the session that is only valid until the next `get()`.
* This can be useful for temporary values, like error messages.
*/
flash<Key extends keyof FlashData & string>(name: Key, value: FlashData[Key]): void;
/**
* Removes a value from the session.
*/
unset(name: keyof Data & string): void;
}
type FlashSessionData<Data, FlashData> = Partial<Data & {
[Key in keyof FlashData as FlashDataKey<Key & string>]: FlashData[Key];
}>;
type FlashDataKey<Key extends string> = `__flash_${Key}__`;
type CreateSessionFunction = <Data = SessionData, FlashData = Data>(initialData?: Data, id?: string) => Session<Data, FlashData>;
/**
* Creates a new Session object.
*
* Note: This function is typically not invoked directly by application code.
* Instead, use a `SessionStorage` object's `getSession` method.
*
* @see https://remix.run/utils/sessions#createsession
*/
declare const createSession: CreateSessionFunction;
type IsSessionFunction = (object: any) => object is Session;
/**
* Returns true if an object is a Remix session.
*
* @see https://remix.run/utils/sessions#issession
*/
declare const isSession: IsSessionFunction;
/**
* SessionStorage stores session data between HTTP requests and knows how to
* parse and create cookies.
*
* A SessionStorage creates Session objects using a `Cookie` header as input.
* Then, later it generates the `Set-Cookie` header to be used in the response.
*/
interface SessionStorage<Data = SessionData, FlashData = Data> {
/**
* Parses a Cookie header from a HTTP request and returns the associated
* Session. If there is no session associated with the cookie, this will
* return a new Session with no data.
*/
getSession: (cookieHeader?: string | null, options?: ParseOptions) => Promise<Session<Data, FlashData>>;
/**
* Stores all data in the Session and returns the Set-Cookie header to be
* used in the HTTP response.
*/
commitSession: (session: Session<Data, FlashData>, options?: SerializeOptions) => Promise<string>;
/**
* Deletes all data associated with the Session and returns the Set-Cookie
* header to be used in the HTTP response.
*/
destroySession: (session: Session<Data, FlashData>, options?: SerializeOptions) => Promise<string>;
}
/**
* SessionIdStorageStrategy is designed to allow anyone to easily build their
* own SessionStorage using `createSessionStorage(strategy)`.
*
* This strategy describes a common scenario where the session id is stored in
* a cookie but the actual session data is stored elsewhere, usually in a
* database or on disk. A set of create, read, update, and delete operations
* are provided for managing the session data.
*/
interface SessionIdStorageStrategy<Data = SessionData, FlashData = Data> {
/**
* The Cookie used to store the session id, or options used to automatically
* create one.
*/
cookie?: Cookie | (CookieOptions & {
name?: string;
});
/**
* Creates a new record with the given data and returns the session id.
*/
createData: (data: FlashSessionData<Data, FlashData>, expires?: Date) => Promise<string>;
/**
* Returns data for a given session id, or `null` if there isn't any.
*/
readData: (id: string) => Promise<FlashSessionData<Data, FlashData> | null>;
/**
* Updates data for the given session id.
*/
updateData: (id: string, data: FlashSessionData<Data, FlashData>, expires?: Date) => Promise<void>;
/**
* Deletes data for a given session id from the data store.
*/
deleteData: (id: string) => Promise<void>;
}
/**
* Creates a SessionStorage object using a SessionIdStorageStrategy.
*
* Note: This is a low-level API that should only be used if none of the
* existing session storage options meet your requirements.
*/
declare function createSessionStorage<Data = SessionData, FlashData = Data>({ cookie: cookieArg, createData, readData, updateData, deleteData, }: SessionIdStorageStrategy<Data, FlashData>): SessionStorage<Data, FlashData>;
interface CookieSessionStorageOptions {
/**
* The Cookie used to store the session data on the client, or options used
* to automatically create one.
*/
cookie?: SessionIdStorageStrategy["cookie"];
}
/**
* Creates and returns a SessionStorage object that stores all session data
* directly in the session cookie itself.
*
* This has the advantage that no database or other backend services are
* needed, and can help to simplify some load-balanced scenarios. However, it
* also has the limitation that serialized session data may not exceed the
* browser's maximum cookie size. Trade-offs!
*/
declare function createCookieSessionStorage<Data = SessionData, FlashData = Data>({ cookie: cookieArg }?: CookieSessionStorageOptions): SessionStorage<Data, FlashData>;
interface MemorySessionStorageOptions {
/**
* The Cookie used to store the session id on the client, or options used
* to automatically create one.
*/
cookie?: SessionIdStorageStrategy["cookie"];
}
/**
* Creates and returns a simple in-memory SessionStorage object, mostly useful
* for testing and as a reference implementation.
*
* Note: This storage does not scale beyond a single process, so it is not
* suitable for most production scenarios.
*/
declare function createMemorySessionStorage<Data = SessionData, FlashData = Data>({ cookie }?: MemorySessionStorageOptions): SessionStorage<Data, FlashData>;
type DevServerHooks = {
getCriticalCss?: (build: ServerBuild, pathname: string) => Promise<string | undefined>;
processRequestError?: (error: unknown) => void;
};
declare function setDevServerHooks(devServerHooks: DevServerHooks): void;
declare function deserializeErrors(errors: RouterState["errors"]): RouterState["errors"];
type RemixErrorBoundaryProps = React.PropsWithChildren<{
location: Location;
isOutsideRemixApp?: boolean;
error?: Error;
}>;
type RemixErrorBoundaryState = {
error: null | Error;
location: Location;
};
declare class RemixErrorBoundary extends React.Component<RemixErrorBoundaryProps, RemixErrorBoundaryState> {
constructor(props: RemixErrorBoundaryProps);
static getDerivedStateFromError(error: Error): {
error: Error;
};
static getDerivedStateFromProps(props: RemixErrorBoundaryProps, state: RemixErrorBoundaryState): {
error: Error | null;
location: Location<any>;
};
render(): string | number | boolean | Iterable<React.ReactNode> | React.JSX.Element | null | undefined;
}
export { ActionFunction, ActionFunctionArgs, AppLoadContext$1 as AppLoadContext, Blocker, BlockerFunction, ClientActionFunction, ClientLoaderFunction, type Cookie, type CookieOptions, type CookieSignatureOptions, type CreateRequestHandlerFunction, Router as DataRouter, DataStrategyFunction, EntryContext, type FlashSessionData, type HandleDataRequestFunction, type HandleDocumentRequestFunction, type HandleErrorFunction, type HeadersArgs, type HeadersFunction, HydrationState, IndexRouteObject, InitialEntry, type IsCookieFunction, type IsSessionFunction, LinksFunction, LoaderFunction, LoaderFunctionArgs, Location, MetaFunction, type NavigateFunction, NavigateOptions, Navigation, Action as NavigationType, NonIndexRouteObject, ParamParseKey, Params, Path, PathMatch, PathPattern, RelativeRoutingType, type RequestHandler, RevalidationState, RouteObject, RouterState, type RoutesTestStubProps, type ServerBuild, type ServerEntryModule, ServerRouter, type ServerRouterProps, type Session, type SessionData, type SessionIdStorageStrategy, type SessionStorage, StaticHandler, StaticHandlerContext, StaticRouter, type StaticRouterProps, StaticRouterProvider, type StaticRouterProviderProps, To, UIMatch, AssetsManifest as UNSAFE_AssetsManifest, RemixErrorBoundary as UNSAFE_RemixErrorBoundary, RouteModules as UNSAFE_RouteModules, ServerMode as UNSAFE_ServerMode, SingleFetchRedirectSymbol as UNSAFE_SingleFetchRedirectSymbol, decodeViaTurboStream as UNSAFE_decodeViaTurboStream, deserializeErrors as UNSAFE_deserializeErrors, getSingleFetchDataStrategy as UNSAFE_getSingleFetchDataStrategy, createCookie, createCookieSessionStorage, createMemorySessionStorage, createRequestHandler, createRoutesStub, createSession, createSessionStorage, createStaticHandler, createStaticRouter, isCookie, isSession, setDevServerHooks as unstable_setDevServerHooks, useActionData, useAsyncError, useAsyncValue, useBlocker, useHref, useInRouterContext, useLoaderData, useLocation, useMatch, useMatches, useNavigate, useNavigation, useNavigationType, useOutlet, useOutletContext, useParams, useResolvedPath, useRevalidator, useRouteError, useRouteLoaderData, useRoutes };
{
"name": "react-router",
"version": "0.0.0-nightly-1a96ee758-20240912",
"version": "0.0.0-nightly-1fa84a4d4-20241025",
"description": "Declarative routing for React",

@@ -21,27 +21,63 @@ "keywords": [

"sideEffects": false,
"main": "./dist/main.js",
"types": "./dist/index.d.ts",
"main": "./dist/index.js",
"unpkg": "./dist/umd/react-router.production.min.js",
"module": "./dist/index.mjs",
"types": "./dist/index.d.ts",
"exports": {
".": {
"types": "./dist/index.d.ts",
"import": "./dist/index.mjs",
"require": "./dist/main.js"
"node": {
"types": "./dist/index.d.ts",
"module-sync": "./dist/index.mjs",
"default": "./dist/index.js"
},
"import": {
"types": "./dist/index.d.mts",
"default": "./dist/index.mjs"
},
"default": {
"types": "./dist/index.d.ts",
"default": "./dist/index.js"
}
},
"./types": {
"types": "./dist/lib/types.d.ts"
},
"./dom": {
"types": "./dist/dom-export.d.ts",
"import": "./dist/dom-export.mjs",
"require": "./dist/main-dom-export.js"
"node": {
"types": "./dist/dom-export.d.ts",
"module-sync": "./dist/dom-export.mjs",
"default": "./dist/dom-export.js"
},
"import": {
"types": "./dist/dom-export.d.mts",
"default": "./dist/dom-export.mjs"
},
"default": {
"types": "./dist/dom-export.d.ts",
"default": "./dist/dom-export.js"
}
},
"./package.json": "./package.json"
},
"wireit": {
"build": {
"command": "rimraf dist && tsup",
"files": [
"lib/**",
"*.ts",
"tsconfig.json",
"package.json"
],
"output": [
"dist/**"
]
}
},
"dependencies": {
"@types/cookie": "^0.6.0",
"@web3-storage/multipart-parser": "^1.0.0",
"cookie": "^0.6.0",
"cookie": "^1.0.1",
"set-cookie-parser": "^2.6.0",
"source-map": "^0.7.3",
"turbo-stream": "2.4.0",
"react-router": "0.0.0-nightly-1a96ee758-20240912"
"turbo-stream": "2.4.0"
},

@@ -51,3 +87,7 @@ "devDependencies": {

"react": "^18.2.0",
"react-dom": "^18.2.0"
"react-dom": "^18.2.0",
"rimraf": "^6.0.1",
"tsup": "^8.3.0",
"typescript": "^5.1.6",
"wireit": "0.14.9"
},

@@ -70,4 +110,7 @@ "peerDependencies": {

"engines": {
"node": ">=18.0.0"
"node": ">=20.0.0"
},
"scripts": {
"build": "wireit"
}
}

4

README.md
# React Router
The `react-router` package is the heart of [React Router](https://github.com/remix-run/react-router) and provides all the core functionality.
If you'd like to extend React Router and you know what you're doing, you should
add `react-router` **as a peer dependency, not a regular dependency** in your
package.

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc