Routing Components

/**
 * Route component for declaring route patterns and rendering content
 * @param props - Route configuration including path pattern and render options
 * @returns Rendered content if route matches, null otherwise
 */
function Route<T extends DefaultParams | undefined = undefined, RoutePath extends PathPattern = PathPattern>(
  props: RouteProps<T, RoutePath>
): ReturnType<FunctionComponent>;

interface RouteProps<T extends DefaultParams | undefined = undefined, RoutePath extends PathPattern = PathPattern> {
  /** Route pattern to match against - string patterns support :param syntax, RegExp patterns are supported */
  path?: RoutePath;
  /** Child content - can be React nodes or render function receiving matched parameters */
  children?: 
    | ((params: T extends DefaultParams ? T : RoutePath extends string ? StringRouteParams<RoutePath> : RegexRouteParams) => ReactNode)
    | ReactNode;
  /** Component to render when route matches - receives params as props */
  component?: ComponentType<RouteComponentProps<T extends DefaultParams ? T : RoutePath extends string ? StringRouteParams<RoutePath> : RegexRouteParams>>;
  /** Enable nested routing - route will match loosely and provide base path for nested routes */
  nest?: boolean;
}

interface RouteComponentProps<T extends DefaultParams = DefaultParams> {
  params: T;
}

import { Route } from "wouter";

// Basic route with component
<Route path="/users" component={UserList} />

// Route with parameters using render prop
<Route path="/users/:id">
  {(params) => <UserDetail userId={params.id} />}
</Route>

// Route with children
<Route path="/dashboard">
  <DashboardContent />
</Route>

// Nested route
<Route path="/admin" nest>
  <AdminLayout>
    <Route path="/users" component={AdminUsers} />
    <Route path="/settings" component={AdminSettings} />
  </AdminLayout>
</Route>

// Catch-all route
<Route>
  <NotFound />
</Route>

/**
 * Navigation link component with active state detection
 * @param props - Link configuration including destination and navigation options
 * @returns Anchor element or cloned child component with navigation behavior
 */
function Link<H extends BaseLocationHook = BrowserLocationHook>(
  props: LinkProps<H>
): ReturnType<FunctionComponent>;

type LinkProps<H extends BaseLocationHook = BrowserLocationHook> = NavigationalProps<H> & 
  AsChildProps<
    { children: ReactElement; onClick?: MouseEventHandler },
    HTMLLinkAttributes & RefAttributes<HTMLAnchorElement>
  >;

type NavigationalProps<H extends BaseLocationHook = BrowserLocationHook> = 
  ({ to: Path; href?: never } | { href: Path; to?: never }) & HookNavigationOptions<H>;

type HTMLLinkAttributes = Omit<AnchorHTMLAttributes<HTMLAnchorElement>, "className"> & {
  /** CSS class name - can be string or function that receives active state */
  className?: string | undefined | ((isActive: boolean) => string | undefined);
};

type AsChildProps<ComponentProps, DefaultElementProps> = 
  | ({ asChild?: false } & DefaultElementProps)
  | ({ asChild: true } & ComponentProps);

import { Link } from "wouter";

// Basic link
<Link href="/about">About Us</Link>

// Link with active styling
<Link 
  href="/dashboard"
  className={(active) => active ? "nav-link active" : "nav-link"}
>
  Dashboard
</Link>

// Custom component link
<Link href="/profile" asChild>
  <CustomButton>My Profile</CustomButton>
</Link>

// Link with navigation options
<Link 
  href="/settings" 
  replace={true}
  state={{ from: "navbar" }}
>
  Settings
</Link>

/**
 * Switch component for exclusive route matching
 * @param props - Switch configuration with child routes and optional location override
 * @returns First matching route or null if no routes match
 */
function Switch(props: SwitchProps): ReturnType<FunctionComponent>;

interface SwitchProps {
  /** Optional location string to match against instead of current location */
  location?: string;
  /** Child routes - typically Route components */
  children: ReactNode;
}

import { Route, Switch } from "wouter";

// Basic switch with exclusive matching
<Switch>
  <Route path="/" component={Home} />
  <Route path="/about" component={About} />
  <Route path="/contact" component={Contact} />
  <Route>404 Not Found</Route>
</Switch>

// Switch with custom location
<Switch location="/admin/users">
  <Route path="/admin/users" component={AdminUsers} />
  <Route path="/admin/settings" component={AdminSettings} />
</Switch>

/**
 * Redirect component for immediate navigation
 * @param props - Redirect configuration including destination and navigation options
 * @returns Always returns null after triggering navigation
 */
function Redirect<H extends BaseLocationHook = BrowserLocationHook>(
  props: RedirectProps<H>
): null;

type RedirectProps<H extends BaseLocationHook = BrowserLocationHook> = NavigationalProps<H> & {
  children?: never;
};

import { Route, Redirect } from "wouter";

// Basic redirect
<Route path="/old-path">
  <Redirect to="/new-path" />
</Route>

// Conditional redirect
{!user && <Redirect to="/login" />}

// Redirect with state
<Redirect 
  to="/dashboard" 
  state={{ message: "Welcome back!" }}
  replace={true}
/>

/**
 * Router component for providing routing context and configuration
 * @param props - Router configuration options and child components
 * @returns Context provider wrapping child components
 */
function Router(props: RouterProps): ReturnType<FunctionComponent>;

type RouterProps = RouterOptions & {
  children: ReactNode;
};

type RouterOptions = {
  /** Custom location hook to use instead of default browser location */
  hook?: BaseLocationHook;
  /** Custom search hook for query parameter handling */
  searchHook?: BaseSearchHook;
  /** Base path to prepend to all routes */
  base?: Path;
  /** Custom route pattern parser */
  parser?: Parser;
  /** Static path for server-side rendering */
  ssrPath?: Path;
  /** Static search string for server-side rendering */
  ssrSearch?: SearchString;
  /** Context object for tracking SSR state */
  ssrContext?: SsrContext;
  /** Custom href formatter function */
  hrefs?: HrefsFormatter;
};

import { Router, Route } from "wouter";
import { useHashLocation } from "wouter/use-hash-location";

// Custom router with hash routing
<Router hook={useHashLocation}>
  <Route path="/" component={Home} />
  <Route path="/about" component={About} />
</Router>

// Router with base path
<Router base="/app">
  <Route path="/dashboard" component={Dashboard} /> // matches /app/dashboard
  <Route path="/settings" component={Settings} />   // matches /app/settings
</Router>

// SSR router
<Router 
  ssrPath="/current-path"
  ssrSearch="?param=value"
  ssrContext={ssrContext}
>
  <App />
</Router>

type Parser = (route: Path, loose?: boolean) => { pattern: RegExp; keys: string[] };

type HrefsFormatter = (href: string, router: RouterObject) => string;

type SsrContext = {
  redirectTo?: Path;
};

type StringRouteParams<T extends string> = RouteParams<T> & {
  [param: number]: string | undefined;
};

type RegexRouteParams = { 
  [key: string | number]: string | undefined 
};