hash-router.mdx

title	HashRouter

The HashRouter is a top-level component that manages the routing of your application. It is a client-side router that uses the hash portion of the URL, allowing a single-page application to mimic the experience of a multi-page site.

Hash routing enables an application to run from a single HTML file, making it suitable for hosting on static file servers.

However, compared to a browser router like Router, this approach is not SEO-friendly. Most search engines do not index the hash portion of URLs, so they can only crawl the index page of your application.

The root prop is used for layout components that wrap matched routes and need access to the router context. This is particularly useful for navigation components that include <A> links.

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

const App = (props) => (
	<>
		<h1>Root header</h1>
		{props.children}
	</>
);

render(
	() => <HashRouter root={App}>{/*... routes */}</HashRouter>,
	document.getElementById("app")
);

prop	type	description
children	JSX.Element, RouteDefinition, or RouteDefinition[]	The route definitions
root	Component	Top level layout component
base	string	Base url to use for matching routes
actionBase	string	Root url for server actions, default: /_server
preload	boolean	Enables/disables preloads globally, default: true
explicitLinks	boolean	Disables all anchors being intercepted and instead requires <A>. default: false