Components

HashRouter

HashRouter is the browser router variant that keeps the route in the URL fragment. It reads and writes window.location.hash, so routed URLs render as hash paths such as #/docs instead of pathname URLs such as /docs.

Import

import { HashRouter } from "@solidjs/router";

Type

type BaseRouterProps = {
  base?: string;
  root?: Component<RouteSectionProps>;
  rootPreload?: RoutePreloadFunc;
  singleFlight?: boolean;
  children?: JSX.Element | RouteDefinition | RouteDefinition[];
  transformUrl?: (url: string) => string;
  rootLoad?: RoutePreloadFunc;
};

type HashRouterProps = BaseRouterProps & {
  actionBase?: string;
  explicitLinks?: boolean;
  preload?: boolean;
};

function HashRouter(props: HashRouterProps): JSX.Element;

Props

`children`

Type: JSX.Element | RouteDefinition | RouteDefinition[]
Optional: Yes

Route definitions rendered by the router.

`base`

Type: string
Default: ""
Optional: Yes

Base path used when creating route branches.

`root`

Type: Component<RouteSectionProps>
Optional: Yes

Component rendered around matched routes.

`rootPreload`

Type: RoutePreloadFunc
Optional: Yes

Preload function called for the root route context.

`singleFlight`

Type: boolean
Default: true
Optional: Yes

Controls the router context singleFlight setting.

`transformUrl`

Type: (url: string) => string
Optional: Yes

Function applied to the location pathname before route matching.

`actionBase`

Type: string
Default: "/_server"
Optional: Yes

Base path used by native form action handling.

`explicitLinks`

Type: boolean
Default: false
Optional: Yes

Controls whether native anchor interception requires the link attribute.

`preload`

Type: boolean
Default: true
Optional: Yes

Controls router-managed anchor preloading.

Behavior

Reads the route source from window.location.hash.slice(1).
Navigation writes "#" + value with window.history.pushState or window.history.replaceState.
Rendered paths have a leading #.
Listens for hashchange events.
Hash-only hrefs that do not start with / are parsed as hashes on the current path.

Examples

Basic usage

import { render } from "solid-js/web";
import { HashRouter, Route } from "@solidjs/router";

render(
  () => (
    <HashRouter>
      <Route path="/" component={() => <h1>Home</h1>} />
    </HashRouter>
  ),
  document.getElementById("root")!
);

Report an issue with this page