\\` or \\`useRoutes(routes, location)\\`, ` +\n `the location pathname must begin with the portion of the URL pathname that was ` +\n `matched by all parent routes. The current pathname base is \"${parentPathnameBase}\" ` +\n `but pathname \"${parsedLocationArg.pathname}\" was given in the \\`location\\` prop.`\n );\n\n location = parsedLocationArg;\n } else {\n location = locationFromContext;\n }\n\n let pathname = location.pathname || \"/\";\n let remainingPathname =\n parentPathnameBase === \"/\"\n ? pathname\n : pathname.slice(parentPathnameBase.length) || \"/\";\n\n let matches = matchRoutes(routes, { pathname: remainingPathname });\n\n if (__DEV__) {\n warning(\n parentRoute || matches != null,\n `No routes matched location \"${location.pathname}${location.search}${location.hash}\" `\n );\n\n warning(\n matches == null ||\n matches[matches.length - 1].route.element !== undefined,\n `Matched leaf route at location \"${location.pathname}${location.search}${location.hash}\" does not have an element. ` +\n `This means it will render an with a null value by default resulting in an \"empty\" page.`\n );\n }\n\n let renderedMatches = _renderMatches(\n matches &&\n matches.map((match) =>\n Object.assign({}, match, {\n params: Object.assign({}, parentParams, match.params),\n pathname: joinPaths([parentPathnameBase, match.pathname]),\n pathnameBase:\n match.pathnameBase === \"/\"\n ? parentPathnameBase\n : joinPaths([parentPathnameBase, match.pathnameBase]),\n })\n ),\n parentMatches,\n dataRouterStateContext || undefined\n );\n\n // When a user passes in a `locationArg`, the associated routes need to\n // be wrapped in a new `LocationContext.Provider` in order for `useLocation`\n // to use the scoped location instead of the global location.\n if (locationArg && renderedMatches) {\n return (\n \n {renderedMatches}\n \n );\n }\n\n return renderedMatches;\n}\n\nfunction DefaultErrorElement() {\n let error = useRouteError();\n let message = isRouteErrorResponse(error)\n ? `${error.status} ${error.statusText}`\n : error instanceof Error\n ? error.message\n : JSON.stringify(error);\n let stack = error instanceof Error ? error.stack : null;\n let lightgrey = \"rgba(200,200,200, 0.5)\";\n let preStyles = { padding: \"0.5rem\", backgroundColor: lightgrey };\n let codeStyles = { padding: \"2px 4px\", backgroundColor: lightgrey };\n return (\n <>\n Unhandled Thrown Error!
\n {message}
\n {stack ? {stack}
: null}\n 💿 Hey developer 👋
\n \n You can provide a way better UX than this when your app throws errors by\n providing your own \n errorElement
props on \n <Route>
\n
\n >\n );\n}\n\ntype RenderErrorBoundaryProps = React.PropsWithChildren<{\n location: Location;\n error: any;\n component: React.ReactNode;\n}>;\n\ntype RenderErrorBoundaryState = {\n location: Location;\n error: any;\n};\n\nexport class RenderErrorBoundary extends React.Component<\n RenderErrorBoundaryProps,\n RenderErrorBoundaryState\n> {\n constructor(props: RenderErrorBoundaryProps) {\n super(props);\n this.state = {\n location: props.location,\n error: props.error,\n };\n }\n\n static getDerivedStateFromError(error: any) {\n return { error: error };\n }\n\n static getDerivedStateFromProps(\n props: RenderErrorBoundaryProps,\n state: RenderErrorBoundaryState\n ) {\n // When we get into an error state, the user will likely click \"back\" to the\n // previous page that didn't have an error. Because this wraps the entire\n // application, that will have no effect--the error page continues to display.\n // This gives us a mechanism to recover from the error when the location changes.\n //\n // Whether we're in an error state or not, we update the location in state\n // so that when we are in an error state, it gets reset when a new location\n // comes in and the user recovers from the error.\n if (state.location !== props.location) {\n return {\n error: props.error,\n location: props.location,\n };\n }\n\n // If we're not changing locations, preserve the location but still surface\n // any new errors that may come through. We retain the existing error, we do\n // this because the error provided from the app state may be cleared without\n // the location changing.\n return {\n error: props.error || state.error,\n location: state.location,\n };\n }\n\n componentDidCatch(error: any, errorInfo: any) {\n console.error(\n \"React Router caught the following error during render\",\n error,\n errorInfo\n );\n }\n\n render() {\n return this.state.error ? (\n \n ) : (\n this.props.children\n );\n }\n}\n\ninterface RenderedRouteProps {\n routeContext: RouteContextObject;\n match: RouteMatch;\n children: React.ReactNode | null;\n}\n\nfunction RenderedRoute({ routeContext, match, children }: RenderedRouteProps) {\n let dataStaticRouterContext = React.useContext(DataStaticRouterContext);\n\n // Track how deep we got in our render pass to emulate SSR componentDidCatch\n // in a DataStaticRouter\n if (dataStaticRouterContext && match.route.errorElement) {\n dataStaticRouterContext._deepestRenderedBoundaryId = match.route.id;\n }\n\n return (\n \n {children}\n \n );\n}\n\nexport function _renderMatches(\n matches: RouteMatch[] | null,\n parentMatches: RouteMatch[] = [],\n dataRouterState?: RemixRouter[\"state\"]\n): React.ReactElement | null {\n if (matches == null) {\n if (dataRouterState?.errors) {\n // Don't bail if we have data router errors so we can render them in the\n // boundary. Use the pre-matched (or shimmed) matches\n matches = dataRouterState.matches as DataRouteMatch[];\n } else {\n return null;\n }\n }\n\n let renderedMatches = matches;\n\n // If we have data errors, trim matches to the highest error boundary\n let errors = dataRouterState?.errors;\n if (errors != null) {\n let errorIndex = renderedMatches.findIndex(\n (m) => m.route.id && errors?.[m.route.id]\n );\n invariant(\n errorIndex >= 0,\n `Could not find a matching route for the current errors: ${errors}`\n );\n renderedMatches = renderedMatches.slice(\n 0,\n Math.min(renderedMatches.length, errorIndex + 1)\n );\n }\n\n return renderedMatches.reduceRight((outlet, match, index) => {\n let error = match.route.id ? errors?.[match.route.id] : null;\n // Only data routers handle errors\n let errorElement = dataRouterState\n ? match.route.errorElement || \n : null;\n let getChildren = () => (\n \n {error\n ? errorElement\n : match.route.element !== undefined\n ? match.route.element\n : outlet}\n \n );\n // Only wrap in an error boundary within data router usages when we have an\n // errorElement on this route. Otherwise let it bubble up to an ancestor\n // errorElement\n return dataRouterState && (match.route.errorElement || index === 0) ? (\n \n ) : (\n getChildren()\n );\n }, null as React.ReactElement | null);\n}\n\nenum DataRouterHook {\n UseRevalidator = \"useRevalidator\",\n}\n\nenum DataRouterStateHook {\n UseLoaderData = \"useLoaderData\",\n UseActionData = \"useActionData\",\n UseRouteError = \"useRouteError\",\n UseNavigation = \"useNavigation\",\n UseRouteLoaderData = \"useRouteLoaderData\",\n UseMatches = \"useMatches\",\n UseRevalidator = \"useRevalidator\",\n}\n\nfunction getDataRouterConsoleError(\n hookName: DataRouterHook | DataRouterStateHook\n) {\n return `${hookName} must be used within a data router. See https://reactrouter.com/en/main/routers/picking-a-router.`;\n}\n\nfunction useDataRouterContext(hookName: DataRouterHook) {\n let ctx = React.useContext(DataRouterContext);\n invariant(ctx, getDataRouterConsoleError(hookName));\n return ctx;\n}\n\nfunction useDataRouterState(hookName: DataRouterStateHook) {\n let state = React.useContext(DataRouterStateContext);\n invariant(state, getDataRouterConsoleError(hookName));\n return state;\n}\n\n/**\n * Returns the current navigation, defaulting to an \"idle\" navigation when\n * no navigation is in progress\n */\nexport function useNavigation() {\n let state = useDataRouterState(DataRouterStateHook.UseNavigation);\n return state.navigation;\n}\n\n/**\n * Returns a revalidate function for manually triggering revalidation, as well\n * as the current state of any manual revalidations\n */\nexport function useRevalidator() {\n let dataRouterContext = useDataRouterContext(DataRouterHook.UseRevalidator);\n let state = useDataRouterState(DataRouterStateHook.UseRevalidator);\n return {\n revalidate: dataRouterContext.router.revalidate,\n state: state.revalidation,\n };\n}\n\n/**\n * Returns the active route matches, useful for accessing loaderData for\n * parent/child routes or the route \"handle\" property\n */\nexport function useMatches() {\n let { matches, loaderData } = useDataRouterState(\n DataRouterStateHook.UseMatches\n );\n return React.useMemo(\n () =>\n matches.map((match) => {\n let { pathname, params } = match;\n // Note: This structure matches that created by createUseMatchesMatch\n // in the @remix-run/router , so if you change this please also change\n // that :) Eventually we'll DRY this up\n return {\n id: match.route.id,\n pathname,\n params,\n data: loaderData[match.route.id] as unknown,\n handle: match.route.handle as unknown,\n };\n }),\n [matches, loaderData]\n );\n}\n\n/**\n * Returns the loader data for the nearest ancestor Route loader\n */\nexport function useLoaderData(): unknown {\n let state = useDataRouterState(DataRouterStateHook.UseLoaderData);\n\n let route = React.useContext(RouteContext);\n invariant(route, `useLoaderData must be used inside a RouteContext`);\n\n let thisRoute = route.matches[route.matches.length - 1];\n invariant(\n thisRoute.route.id,\n `useLoaderData can only be used on routes that contain a unique \"id\"`\n );\n\n return state.loaderData[thisRoute.route.id];\n}\n\n/**\n * Returns the loaderData for the given routeId\n */\nexport function useRouteLoaderData(routeId: string): unknown {\n let state = useDataRouterState(DataRouterStateHook.UseRouteLoaderData);\n return state.loaderData[routeId];\n}\n\n/**\n * Returns the action data for the nearest ancestor Route action\n */\nexport function useActionData(): unknown {\n let state = useDataRouterState(DataRouterStateHook.UseActionData);\n\n let route = React.useContext(RouteContext);\n invariant(route, `useActionData must be used inside a RouteContext`);\n\n return Object.values(state?.actionData || {})[0];\n}\n\n/**\n * Returns the nearest ancestor Route error, which could be a loader/action\n * error or a render error. This is intended to be called from your\n * errorElement to display a proper error message.\n */\nexport function useRouteError(): unknown {\n let error = React.useContext(RouteErrorContext);\n let state = useDataRouterState(DataRouterStateHook.UseRouteError);\n let route = React.useContext(RouteContext);\n let thisRoute = route.matches[route.matches.length - 1];\n\n // If this was a render error, we put it in a RouteError context inside\n // of RenderErrorBoundary\n if (error) {\n return error;\n }\n\n invariant(route, `useRouteError must be used inside a RouteContext`);\n invariant(\n thisRoute.route.id,\n `useRouteError can only be used on routes that contain a unique \"id\"`\n );\n\n // Otherwise look for errors from our data router state\n return state.errors?.[thisRoute.route.id];\n}\n\n/**\n * Returns the happy-path data from the nearest ancestor value\n */\nexport function useAsyncValue(): unknown {\n let value = React.useContext(AwaitContext);\n return value?._data;\n}\n\n/**\n * Returns the error from the nearest ancestor value\n */\nexport function useAsyncError(): unknown {\n let value = React.useContext(AwaitContext);\n return value?._error;\n}\n\nconst alreadyWarned: Record = {};\n\nfunction warningOnce(key: string, cond: boolean, message: string) {\n if (!cond && !alreadyWarned[key]) {\n alreadyWarned[key] = true;\n warning(false, message);\n }\n}\n","import * as React from \"react\";\nimport type {\n TrackedPromise,\n InitialEntry,\n Location,\n MemoryHistory,\n Router as RemixRouter,\n RouterState,\n To,\n} from \"@remix-run/router\";\nimport {\n Action as NavigationType,\n AbortedDeferredError,\n createMemoryHistory,\n invariant,\n parsePath,\n stripBasename,\n warning,\n} from \"@remix-run/router\";\nimport { useSyncExternalStore as useSyncExternalStoreShim } from \"./use-sync-external-store-shim\";\n\nimport type {\n DataRouteObject,\n IndexRouteObject,\n RouteMatch,\n RouteObject,\n Navigator,\n NonIndexRouteObject,\n RelativeRoutingType,\n} from \"./context\";\nimport {\n LocationContext,\n NavigationContext,\n DataRouterContext,\n DataRouterStateContext,\n AwaitContext,\n} from \"./context\";\nimport {\n useAsyncValue,\n useInRouterContext,\n useNavigate,\n useOutlet,\n useRoutes,\n _renderMatches,\n} from \"./hooks\";\n\nexport interface RouterProviderProps {\n fallbackElement?: React.ReactNode;\n router: RemixRouter;\n}\n\n/**\n * Given a Remix Router instance, render the appropriate UI\n */\nexport function RouterProvider({\n fallbackElement,\n router,\n}: RouterProviderProps): React.ReactElement {\n // Sync router state to our component state to force re-renders\n let state: RouterState = useSyncExternalStoreShim(\n router.subscribe,\n () => router.state,\n // We have to provide this so React@18 doesn't complain during hydration,\n // but we pass our serialized hydration data into the router so state here\n // is already synced with what the server saw\n () => router.state\n );\n\n let navigator = React.useMemo((): Navigator => {\n return {\n createHref: router.createHref,\n go: (n) => router.navigate(n),\n push: (to, state, opts) =>\n router.navigate(to, {\n state,\n preventScrollReset: opts?.preventScrollReset,\n }),\n replace: (to, state, opts) =>\n router.navigate(to, {\n replace: true,\n state,\n preventScrollReset: opts?.preventScrollReset,\n }),\n };\n }, [router]);\n\n let basename = router.basename || \"/\";\n\n return (\n \n \n \n {router.state.initialized ? : fallbackElement}\n \n \n \n );\n}\n\nexport interface MemoryRouterProps {\n basename?: string;\n children?: React.ReactNode;\n initialEntries?: InitialEntry[];\n initialIndex?: number;\n}\n\n/**\n * A that stores all entries in memory.\n *\n * @see https://reactrouter.com/docs/en/v6/routers/memory-router\n */\nexport function MemoryRouter({\n basename,\n children,\n initialEntries,\n initialIndex,\n}: MemoryRouterProps): React.ReactElement {\n let historyRef = React.useRef();\n if (historyRef.current == null) {\n historyRef.current = createMemoryHistory({\n initialEntries,\n initialIndex,\n v5Compat: true,\n });\n }\n\n let history = historyRef.current;\n let [state, setState] = React.useState({\n action: history.action,\n location: history.location,\n });\n\n React.useLayoutEffect(() => history.listen(setState), [history]);\n\n return (\n \n );\n}\n\nexport interface NavigateProps {\n to: To;\n replace?: boolean;\n state?: any;\n relative?: RelativeRoutingType;\n}\n\n/**\n * Changes the current location.\n *\n * Note: This API is mostly useful in React.Component subclasses that are not\n * able to use hooks. In functional components, we recommend you use the\n * `useNavigate` hook instead.\n *\n * @see https://reactrouter.com/docs/en/v6/components/navigate\n */\nexport function Navigate({\n to,\n replace,\n state,\n relative,\n}: NavigateProps): null {\n invariant(\n useInRouterContext(),\n // TODO: This error is probably because they somehow have 2 versions of\n // the router loaded. We can help them understand how to avoid that.\n ` may be used only in the context of a component.`\n );\n\n warning(\n !React.useContext(NavigationContext).static,\n ` must not be used on the initial render in a . ` +\n `This is a no-op, but you should modify your code so the is ` +\n `only ever rendered in response to some user interaction or state change.`\n );\n\n let dataRouterState = React.useContext(DataRouterStateContext);\n let navigate = useNavigate();\n\n React.useEffect(() => {\n // Avoid kicking off multiple navigations if we're in the middle of a\n // data-router navigation, since components get re-rendered when we enter\n // a submitting/loading state\n if (dataRouterState && dataRouterState.navigation.state !== \"idle\") {\n return;\n }\n navigate(to, { replace, state, relative });\n });\n\n return null;\n}\n\nexport interface OutletProps {\n context?: unknown;\n}\n\n/**\n * Renders the child route's element, if there is one.\n *\n * @see https://reactrouter.com/docs/en/v6/components/outlet\n */\nexport function Outlet(props: OutletProps): React.ReactElement | null {\n return useOutlet(props.context);\n}\n\nexport interface PathRouteProps {\n caseSensitive?: NonIndexRouteObject[\"caseSensitive\"];\n path?: NonIndexRouteObject[\"path\"];\n id?: NonIndexRouteObject[\"id\"];\n loader?: NonIndexRouteObject[\"loader\"];\n action?: NonIndexRouteObject[\"action\"];\n hasErrorBoundary?: NonIndexRouteObject[\"hasErrorBoundary\"];\n shouldRevalidate?: NonIndexRouteObject[\"shouldRevalidate\"];\n handle?: NonIndexRouteObject[\"handle\"];\n index?: false;\n children?: React.ReactNode;\n element?: React.ReactNode | null;\n errorElement?: React.ReactNode | null;\n}\n\nexport interface LayoutRouteProps extends PathRouteProps {}\n\nexport interface IndexRouteProps {\n caseSensitive?: IndexRouteObject[\"caseSensitive\"];\n path?: IndexRouteObject[\"path\"];\n id?: IndexRouteObject[\"id\"];\n loader?: IndexRouteObject[\"loader\"];\n action?: IndexRouteObject[\"action\"];\n hasErrorBoundary?: IndexRouteObject[\"hasErrorBoundary\"];\n shouldRevalidate?: IndexRouteObject[\"shouldRevalidate\"];\n handle?: IndexRouteObject[\"handle\"];\n index: true;\n children?: undefined;\n element?: React.ReactNode | null;\n errorElement?: React.ReactNode | null;\n}\n\nexport type RouteProps = PathRouteProps | LayoutRouteProps | IndexRouteProps;\n\n/**\n * Declares an element that should be rendered at a certain URL path.\n *\n * @see https://reactrouter.com/docs/en/v6/components/route\n */\nexport function Route(_props: RouteProps): React.ReactElement | null {\n invariant(\n false,\n `A is only ever to be used as the child of element, ` +\n `never rendered directly. Please wrap your in a .`\n );\n}\n\nexport interface RouterProps {\n basename?: string;\n children?: React.ReactNode;\n location: Partial | string;\n navigationType?: NavigationType;\n navigator: Navigator;\n static?: boolean;\n}\n\n/**\n * Provides location context for the rest of the app.\n *\n * Note: You usually won't render a directly. Instead, you'll render a\n * router that is more specific to your environment such as a \n * in web browsers or a for server rendering.\n *\n * @see https://reactrouter.com/docs/en/v6/routers/router\n */\nexport function Router({\n basename: basenameProp = \"/\",\n children = null,\n location: locationProp,\n navigationType = NavigationType.Pop,\n navigator,\n static: staticProp = false,\n}: RouterProps): React.ReactElement | null {\n invariant(\n !useInRouterContext(),\n `You cannot render a inside another .` +\n ` You should never have more than one in your app.`\n );\n\n // Preserve trailing slashes on basename, so we can let the user control\n // the enforcement of trailing slashes throughout the app\n let basename = basenameProp.replace(/^\\/*/, \"/\");\n let navigationContext = React.useMemo(\n () => ({ basename, navigator, static: staticProp }),\n [basename, navigator, staticProp]\n );\n\n if (typeof locationProp === \"string\") {\n locationProp = parsePath(locationProp);\n }\n\n let {\n pathname = \"/\",\n search = \"\",\n hash = \"\",\n state = null,\n key = \"default\",\n } = locationProp;\n\n let location = React.useMemo(() => {\n let trailingPathname = stripBasename(pathname, basename);\n\n if (trailingPathname == null) {\n return null;\n }\n\n return {\n pathname: trailingPathname,\n search,\n hash,\n state,\n key,\n };\n }, [basename, pathname, search, hash, state, key]);\n\n warning(\n location != null,\n ` is not able to match the URL ` +\n `\"${pathname}${search}${hash}\" because it does not start with the ` +\n `basename, so the won't render anything.`\n );\n\n if (location == null) {\n return null;\n }\n\n return (\n \n \n \n );\n}\n\nexport interface RoutesProps {\n children?: React.ReactNode;\n location?: Partial | string;\n}\n\n/**\n * A container for a nested tree of elements that renders the branch\n * that best matches the current location.\n *\n * @see https://reactrouter.com/docs/en/v6/components/routes\n */\nexport function Routes({\n children,\n location,\n}: RoutesProps): React.ReactElement | null {\n let dataRouterContext = React.useContext(DataRouterContext);\n // When in a DataRouterContext _without_ children, we use the router routes\n // directly. If we have children, then we're in a descendant tree and we\n // need to use child routes.\n let routes =\n dataRouterContext && !children\n ? (dataRouterContext.router.routes as DataRouteObject[])\n : createRoutesFromChildren(children);\n return useRoutes(routes, location);\n}\n\nexport interface AwaitResolveRenderFunction {\n (data: Awaited): React.ReactElement;\n}\n\nexport interface AwaitProps {\n children: React.ReactNode | AwaitResolveRenderFunction;\n errorElement?: React.ReactNode;\n resolve: TrackedPromise | any;\n}\n\n/**\n * Component to use for rendering lazily loaded data from returning defer()\n * in a loader function\n */\nexport function Await({ children, errorElement, resolve }: AwaitProps) {\n return (\n \n {children}\n \n );\n}\n\ntype AwaitErrorBoundaryProps = React.PropsWithChildren<{\n errorElement?: React.ReactNode;\n resolve: TrackedPromise | any;\n}>;\n\ntype AwaitErrorBoundaryState = {\n error: any;\n};\n\nenum AwaitRenderStatus {\n pending,\n success,\n error,\n}\n\nconst neverSettledPromise = new Promise(() => {});\n\nclass AwaitErrorBoundary extends React.Component<\n AwaitErrorBoundaryProps,\n AwaitErrorBoundaryState\n> {\n constructor(props: AwaitErrorBoundaryProps) {\n super(props);\n this.state = { error: null };\n }\n\n static getDerivedStateFromError(error: any) {\n return { error };\n }\n\n componentDidCatch(error: any, errorInfo: any) {\n console.error(\n \" caught the following error during render\",\n error,\n errorInfo\n );\n }\n\n render() {\n let { children, errorElement, resolve } = this.props;\n\n let promise: TrackedPromise | null = null;\n let status: AwaitRenderStatus = AwaitRenderStatus.pending;\n\n if (!(resolve instanceof Promise)) {\n // Didn't get a promise - provide as a resolved promise\n status = AwaitRenderStatus.success;\n promise = Promise.resolve();\n Object.defineProperty(promise, \"_tracked\", { get: () => true });\n Object.defineProperty(promise, \"_data\", { get: () => resolve });\n } else if (this.state.error) {\n // Caught a render error, provide it as a rejected promise\n status = AwaitRenderStatus.error;\n let renderError = this.state.error;\n promise = Promise.reject().catch(() => {}); // Avoid unhandled rejection warnings\n Object.defineProperty(promise, \"_tracked\", { get: () => true });\n Object.defineProperty(promise, \"_error\", { get: () => renderError });\n } else if ((resolve as TrackedPromise)._tracked) {\n // Already tracked promise - check contents\n promise = resolve;\n status =\n promise._error !== undefined\n ? AwaitRenderStatus.error\n : promise._data !== undefined\n ? AwaitRenderStatus.success\n : AwaitRenderStatus.pending;\n } else {\n // Raw (untracked) promise - track it\n status = AwaitRenderStatus.pending;\n Object.defineProperty(resolve, \"_tracked\", { get: () => true });\n promise = resolve.then(\n (data: any) =>\n Object.defineProperty(resolve, \"_data\", { get: () => data }),\n (error: any) =>\n Object.defineProperty(resolve, \"_error\", { get: () => error })\n );\n }\n\n if (\n status === AwaitRenderStatus.error &&\n promise._error instanceof AbortedDeferredError\n ) {\n // Freeze the UI by throwing a never resolved promise\n throw neverSettledPromise;\n }\n\n if (status === AwaitRenderStatus.error && !errorElement) {\n // No errorElement, throw to the nearest route-level error boundary\n throw promise._error;\n }\n\n if (status === AwaitRenderStatus.error) {\n // Render via our errorElement\n return ;\n }\n\n if (status === AwaitRenderStatus.success) {\n // Render children with resolved value\n return ;\n }\n\n // Throw to the suspense boundary\n throw promise;\n }\n}\n\n/**\n * @private\n * Indirection to leverage useAsyncValue for a render-prop API on \n */\nfunction ResolveAwait({\n children,\n}: {\n children: React.ReactNode | AwaitResolveRenderFunction;\n}) {\n let data = useAsyncValue();\n if (typeof children === \"function\") {\n return children(data);\n }\n return <>{children}>;\n}\n\n///////////////////////////////////////////////////////////////////////////////\n// UTILS\n///////////////////////////////////////////////////////////////////////////////\n\n/**\n * Creates a route config from a React \"children\" object, which is usually\n * either a `` element or an array of them. Used internally by\n * `` to create a route config from its children.\n *\n * @see https://reactrouter.com/docs/en/v6/utils/create-routes-from-children\n */\nexport function createRoutesFromChildren(\n children: React.ReactNode,\n parentPath: number[] = []\n): RouteObject[] {\n let routes: RouteObject[] = [];\n\n React.Children.forEach(children, (element, index) => {\n if (!React.isValidElement(element)) {\n // Ignore non-elements. This allows people to more easily inline\n // conditionals in their route config.\n return;\n }\n\n if (element.type === React.Fragment) {\n // Transparently support React.Fragment and its children.\n routes.push.apply(\n routes,\n createRoutesFromChildren(element.props.children, parentPath)\n );\n return;\n }\n\n invariant(\n element.type === Route,\n `[${\n typeof element.type === \"string\" ? element.type : element.type.name\n }] is not a component. All component children of must be a or `\n );\n\n invariant(\n !element.props.index || !element.props.children,\n \"An index route cannot have child routes.\"\n );\n\n let treePath = [...parentPath, index];\n let route: RouteObject = {\n id: element.props.id || treePath.join(\"-\"),\n caseSensitive: element.props.caseSensitive,\n element: element.props.element,\n index: element.props.index,\n path: element.props.path,\n loader: element.props.loader,\n action: element.props.action,\n errorElement: element.props.errorElement,\n hasErrorBoundary: element.props.errorElement != null,\n shouldRevalidate: element.props.shouldRevalidate,\n handle: element.props.handle,\n };\n\n if (element.props.children) {\n route.children = createRoutesFromChildren(\n element.props.children,\n treePath\n );\n }\n\n routes.push(route);\n });\n\n return routes;\n}\n\n/**\n * Renders the result of `matchRoutes()` into a React element.\n */\nexport function renderMatches(\n matches: RouteMatch[] | null\n): React.ReactElement | null {\n return _renderMatches(matches);\n}\n\n/**\n * @private\n * Walk the route tree and add hasErrorBoundary if it's not provided, so that\n * users providing manual route arrays can just specify errorElement\n */\nexport function enhanceManualRouteObjects(\n routes: RouteObject[]\n): RouteObject[] {\n return routes.map((route) => {\n let routeClone = { ...route };\n if (routeClone.hasErrorBoundary == null) {\n routeClone.hasErrorBoundary = routeClone.errorElement != null;\n }\n if (routeClone.children) {\n routeClone.children = enhanceManualRouteObjects(routeClone.children);\n }\n return routeClone;\n });\n}\n","/**\n * NOTE: If you refactor this to split up the modules into separate files,\n * you'll need to update the rollup config for react-router-dom-v5-compat.\n */\nimport * as React from \"react\";\nimport type {\n NavigateOptions,\n RelativeRoutingType,\n RouteObject,\n To,\n} from \"react-router\";\nimport {\n Router,\n createPath,\n useHref,\n useLocation,\n useMatch,\n useMatches,\n useNavigate,\n useNavigation,\n useResolvedPath,\n UNSAFE_DataRouterContext as DataRouterContext,\n UNSAFE_DataRouterStateContext as DataRouterStateContext,\n UNSAFE_NavigationContext as NavigationContext,\n UNSAFE_RouteContext as RouteContext,\n UNSAFE_enhanceManualRouteObjects as enhanceManualRouteObjects,\n} from \"react-router\";\nimport type {\n BrowserHistory,\n Fetcher,\n FormEncType,\n FormMethod,\n GetScrollRestorationKeyFunction,\n HashHistory,\n History,\n HydrationState,\n Router as RemixRouter,\n} from \"@remix-run/router\";\nimport {\n createRouter,\n createBrowserHistory,\n createHashHistory,\n invariant,\n joinPaths,\n matchPath,\n} from \"@remix-run/router\";\n\nimport type {\n SubmitOptions,\n ParamKeyValuePair,\n URLSearchParamsInit,\n} from \"./dom\";\nimport {\n createSearchParams,\n defaultMethod,\n getFormSubmissionInfo,\n getSearchParamsForLocation,\n shouldProcessLinkClick,\n} from \"./dom\";\n\n////////////////////////////////////////////////////////////////////////////////\n//#region Re-exports\n////////////////////////////////////////////////////////////////////////////////\n\nexport type {\n FormEncType,\n FormMethod,\n ParamKeyValuePair,\n SubmitOptions,\n URLSearchParamsInit,\n};\nexport { createSearchParams };\n\n// Note: Keep in sync with react-router exports!\nexport type {\n ActionFunction,\n ActionFunctionArgs,\n AwaitProps,\n DataRouteMatch,\n DataRouteObject,\n Fetcher,\n Hash,\n IndexRouteObject,\n IndexRouteProps,\n JsonFunction,\n LayoutRouteProps,\n LoaderFunction,\n LoaderFunctionArgs,\n Location,\n MemoryRouterProps,\n NavigateFunction,\n NavigateOptions,\n NavigateProps,\n Navigation,\n Navigator,\n NonIndexRouteObject,\n OutletProps,\n Params,\n ParamParseKey,\n Path,\n PathMatch,\n Pathname,\n PathPattern,\n PathRouteProps,\n RedirectFunction,\n RelativeRoutingType,\n RouteMatch,\n RouteObject,\n RouteProps,\n RouterProps,\n RouterProviderProps,\n RoutesProps,\n Search,\n ShouldRevalidateFunction,\n To,\n} from \"react-router\";\nexport {\n AbortedDeferredError,\n Await,\n MemoryRouter,\n Navigate,\n NavigationType,\n Outlet,\n Route,\n Router,\n RouterProvider,\n Routes,\n createMemoryRouter,\n createPath,\n createRoutesFromChildren,\n createRoutesFromElements,\n defer,\n isRouteErrorResponse,\n generatePath,\n json,\n matchPath,\n matchRoutes,\n parsePath,\n redirect,\n renderMatches,\n resolvePath,\n useActionData,\n useAsyncError,\n useAsyncValue,\n useHref,\n useInRouterContext,\n useLoaderData,\n useLocation,\n useMatch,\n useMatches,\n useNavigate,\n useNavigation,\n useNavigationType,\n useOutlet,\n useOutletContext,\n useParams,\n useResolvedPath,\n useRevalidator,\n useRouteError,\n useRouteLoaderData,\n useRoutes,\n} from \"react-router\";\n\n///////////////////////////////////////////////////////////////////////////////\n// DANGER! PLEASE READ ME!\n// We provide these exports as an escape hatch in the event that you need any\n// routing data that we don't provide an explicit API for. With that said, we\n// want to cover your use case if we can, so if you feel the need to use these\n// we want to hear from you. Let us know what you're building and we'll do our\n// best to make sure we can support you!\n//\n// We consider these exports an implementation detail and do not guarantee\n// against any breaking changes, regardless of the semver release. Use with\n// extreme caution and only if you understand the consequences. Godspeed.\n///////////////////////////////////////////////////////////////////////////////\n\n/** @internal */\nexport {\n UNSAFE_DataRouterContext,\n UNSAFE_DataRouterStateContext,\n UNSAFE_DataStaticRouterContext,\n UNSAFE_NavigationContext,\n UNSAFE_LocationContext,\n UNSAFE_RouteContext,\n UNSAFE_enhanceManualRouteObjects,\n} from \"react-router\";\n//#endregion\n\ndeclare global {\n var __staticRouterHydrationData: HydrationState | undefined;\n}\n\n////////////////////////////////////////////////////////////////////////////////\n//#region Routers\n////////////////////////////////////////////////////////////////////////////////\n\nexport function createBrowserRouter(\n routes: RouteObject[],\n opts?: {\n basename?: string;\n hydrationData?: HydrationState;\n window?: Window;\n }\n): RemixRouter {\n return createRouter({\n basename: opts?.basename,\n history: createBrowserHistory({ window: opts?.window }),\n hydrationData: opts?.hydrationData || window?.__staticRouterHydrationData,\n routes: enhanceManualRouteObjects(routes),\n }).initialize();\n}\n\nexport function createHashRouter(\n routes: RouteObject[],\n opts?: {\n basename?: string;\n hydrationData?: HydrationState;\n window?: Window;\n }\n): RemixRouter {\n return createRouter({\n basename: opts?.basename,\n history: createHashHistory({ window: opts?.window }),\n hydrationData: opts?.hydrationData || window?.__staticRouterHydrationData,\n routes: enhanceManualRouteObjects(routes),\n }).initialize();\n}\n//#endregion\n\n////////////////////////////////////////////////////////////////////////////////\n//#region Components\n////////////////////////////////////////////////////////////////////////////////\n\nexport interface BrowserRouterProps {\n basename?: string;\n children?: React.ReactNode;\n window?: Window;\n}\n\n/**\n * A `` for use in web browsers. Provides the cleanest URLs.\n */\nexport function BrowserRouter({\n basename,\n children,\n window,\n}: BrowserRouterProps) {\n let historyRef = React.useRef();\n if (historyRef.current == null) {\n historyRef.current = createBrowserHistory({ window, v5Compat: true });\n }\n\n let history = historyRef.current;\n let [state, setState] = React.useState({\n action: history.action,\n location: history.location,\n });\n\n React.useLayoutEffect(() => history.listen(setState), [history]);\n\n return (\n \n );\n}\n\nexport interface HashRouterProps {\n basename?: string;\n children?: React.ReactNode;\n window?: Window;\n}\n\n/**\n * A `` for use in web browsers. Stores the location in the hash\n * portion of the URL so it is not sent to the server.\n */\nexport function HashRouter({ basename, children, window }: HashRouterProps) {\n let historyRef = React.useRef();\n if (historyRef.current == null) {\n historyRef.current = createHashHistory({ window, v5Compat: true });\n }\n\n let history = historyRef.current;\n let [state, setState] = React.useState({\n action: history.action,\n location: history.location,\n });\n\n React.useLayoutEffect(() => history.listen(setState), [history]);\n\n return (\n \n );\n}\n\nexport interface HistoryRouterProps {\n basename?: string;\n children?: React.ReactNode;\n history: History;\n}\n\n/**\n * A `` that accepts a pre-instantiated history object. It's important\n * to note that using your own history object is highly discouraged and may add\n * two versions of the history library to your bundles unless you use the same\n * version of the history library that React Router uses internally.\n */\nfunction HistoryRouter({ basename, children, history }: HistoryRouterProps) {\n const [state, setState] = React.useState({\n action: history.action,\n location: history.location,\n });\n\n React.useLayoutEffect(() => history.listen(setState), [history]);\n\n return (\n \n );\n}\n\nif (__DEV__) {\n HistoryRouter.displayName = \"unstable_HistoryRouter\";\n}\n\nexport { HistoryRouter as unstable_HistoryRouter };\n\nexport interface LinkProps\n extends Omit, \"href\"> {\n reloadDocument?: boolean;\n replace?: boolean;\n state?: any;\n preventScrollReset?: boolean;\n relative?: RelativeRoutingType;\n to: To;\n}\n\n/**\n * The public API for rendering a history-aware .\n */\nexport const Link = React.forwardRef(\n function LinkWithRef(\n {\n onClick,\n relative,\n reloadDocument,\n replace,\n state,\n target,\n to,\n preventScrollReset,\n ...rest\n },\n ref\n ) {\n let href = useHref(to, { relative });\n let internalOnClick = useLinkClickHandler(to, {\n replace,\n state,\n target,\n preventScrollReset,\n relative,\n });\n function handleClick(\n event: React.MouseEvent\n ) {\n if (onClick) onClick(event);\n if (!event.defaultPrevented) {\n internalOnClick(event);\n }\n }\n\n return (\n // eslint-disable-next-line jsx-a11y/anchor-has-content\n \n );\n }\n);\n\nif (__DEV__) {\n Link.displayName = \"Link\";\n}\n\nexport interface NavLinkProps\n extends Omit {\n children?:\n | React.ReactNode\n | ((props: { isActive: boolean; isPending: boolean }) => React.ReactNode);\n caseSensitive?: boolean;\n className?:\n | string\n | ((props: {\n isActive: boolean;\n isPending: boolean;\n }) => string | undefined);\n end?: boolean;\n style?:\n | React.CSSProperties\n | ((props: {\n isActive: boolean;\n isPending: boolean;\n }) => React.CSSProperties | undefined);\n}\n\n/**\n * A wrapper that knows if it's \"active\" or not.\n */\nexport const NavLink = React.forwardRef(\n function NavLinkWithRef(\n {\n \"aria-current\": ariaCurrentProp = \"page\",\n caseSensitive = false,\n className: classNameProp = \"\",\n end = false,\n style: styleProp,\n to,\n children,\n ...rest\n },\n ref\n ) {\n let path = useResolvedPath(to, { relative: rest.relative });\n let location = useLocation();\n let routerState = React.useContext(DataRouterStateContext);\n\n let toPathname = path.pathname;\n let locationPathname = location.pathname;\n let nextLocationPathname =\n routerState && routerState.navigation && routerState.navigation.location\n ? routerState.navigation.location.pathname\n : null;\n\n if (!caseSensitive) {\n locationPathname = locationPathname.toLowerCase();\n nextLocationPathname = nextLocationPathname\n ? nextLocationPathname.toLowerCase()\n : null;\n toPathname = toPathname.toLowerCase();\n }\n\n let isActive =\n locationPathname === toPathname ||\n (!end &&\n locationPathname.startsWith(toPathname) &&\n locationPathname.charAt(toPathname.length) === \"/\");\n\n let isPending =\n nextLocationPathname != null &&\n (nextLocationPathname === toPathname ||\n (!end &&\n nextLocationPathname.startsWith(toPathname) &&\n nextLocationPathname.charAt(toPathname.length) === \"/\"));\n\n let ariaCurrent = isActive ? ariaCurrentProp : undefined;\n\n let className: string | undefined;\n if (typeof classNameProp === \"function\") {\n className = classNameProp({ isActive, isPending });\n } else {\n // If the className prop is not a function, we use a default `active`\n // class for s that are active. In v5 `active` was the default\n // value for `activeClassName`, but we are removing that API and can still\n // use the old default behavior for a cleaner upgrade path and keep the\n // simple styling rules working as they currently do.\n className = [\n classNameProp,\n isActive ? \"active\" : null,\n isPending ? \"pending\" : null,\n ]\n .filter(Boolean)\n .join(\" \");\n }\n\n let style =\n typeof styleProp === \"function\"\n ? styleProp({ isActive, isPending })\n : styleProp;\n\n return (\n \n {typeof children === \"function\"\n ? children({ isActive, isPending })\n : children}\n \n );\n }\n);\n\nif (__DEV__) {\n NavLink.displayName = \"NavLink\";\n}\n\nexport interface FormProps extends React.FormHTMLAttributes {\n /**\n * The HTTP verb to use when the form is submit. Supports \"get\", \"post\",\n * \"put\", \"delete\", \"patch\".\n */\n method?: FormMethod;\n\n /**\n * Normal `