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")
);