-**Version 0.10.0 requires Solid v1.8.4 or later.**
+[](https://npmjs.com/package/@solidjs/router)
+[](https://npmjs.com/package/@solidjs/router)
+[](https://github.com/solidjs/solid-router)
+[](https://discord.com/invite/solidjs)
+[](https://reddit.com/r/solidjs)
-A router lets you change your view based on the URL in the browser. This allows your "single-page" application to simulate a traditional multipage site. To use Solid Router, you specify components called Routes that depend on the value of the URL (the "path"), and the router handles the mechanism of swapping them in and out.
+
-Solid Router is a universal router for SolidJS - it works whether you're rendering on the client or on the server. It was inspired by and combines paradigms of React Router and the Ember Router. Routes can be defined directly in your app's template using JSX, but you can also pass your route configuration directly as an object. It also supports nested routing, so navigation can change a part of a component, rather than completely replacing it.
+**Solid Router** brings fine-grained reactivity to route navigation, enabling your single-page application to become multi-paged without full page reloads. Fully integrated into the SolidJS ecosystem, Solid Router provides declarative syntax with features like universal rendering and parallel data fetching for best performance.
-It supports all of Solid's SSR methods and has Solid's transitions baked in, so use it freely with suspense, resources, and lazy components. Solid Router also allows you to define a preload function that loads parallel to the routes ([render-as-you-fetch](https://epicreact.dev/render-as-you-fetch/)).
+Explore the official [documentation](https://docs.solidjs.com/solid-router) for detailed guides and examples.
+
+## Core Features
+
+- **All Routing Modes**:
+ - [History-Based](https://docs.solidjs.com/solid-router/reference/components/router#router) for standard browser navigation
+ - [Hash-Based](https://docs.solidjs.com/solid-router/reference/components/hash-router#hashrouter) for navigation based on URL hash
+ - [Static Routing](https://docs.solidjs.com/solid-router/rendering-modes/ssr#server-side-rendering) for server-side rendering (_SSR_)
+ - [Memory-Based](https://docs.solidjs.com/solid-router/reference/components/memory-router#memoryrouter) for testing in non-browser environments
+- **TypeScript**: Full integration for robust, type-safe development
+- **Universal Rendering**: Seamless rendering on both client and server environments
+- **Declarative**: Define routes as components or as an object
+- **Preload Functions**: Parallel data fetching, following the render-as-you-fetch pattern
+- **Dynamic Route Parameters**: Flexible URL patterns with parameters, optional segments, and wildcards
+- **Data APIs with Caching**: Reactive data fetching with deduplication and revalidation
+
+## Table of contents
- [Getting Started](#getting-started)
- [Set Up the Router](#set-up-the-router)
@@ -38,8 +56,9 @@ It supports all of Solid's SSR methods and has Solid's transitions baked in, so
### Set Up the Router
-```sh
-npm i @solidjs/router
+```bash
+# use preferred package manager
+npm add @solidjs/router
```
Install `@solidjs/router`, then start your application by rendering the router component
@@ -48,10 +67,7 @@ Install `@solidjs/router`, then start your application by rendering the router c
import { render } from "solid-js/web";
import { Router } from "@solidjs/router";
-render(
- () => ,
- document.getElementById("app")
-);
+render(() => , document.getElementById("app"));
```
This sets up a Router that will match on the url to display the desired page
@@ -69,13 +85,17 @@ import { Router, Route } from "@solidjs/router";
import Home from "./pages/Home";
import Users from "./pages/Users";
-render(() => (
-
-
-
-
-), document.getElementById("app"));
+render(
+ () => (
+
+
+
+
+ ),
+ document.getElementById("app")
+);
```
+
2. Provide a root level layout
This will always be there and won't update on page change. It is the ideal place to put top level navigation and Context Providers
@@ -87,24 +107,27 @@ import { Router, Route } from "@solidjs/router";
import Home from "./pages/Home";
import Users from "./pages/Users";
-const App = props => (
+const App = (props) => (
<>
My Site with lots of pages
{props.children}
-)
+);
-render(() => (
-
-
-
-
-), document.getElementById("app"));
+render(
+ () => (
+
+
+
+
+ ),
+ document.getElementById("app")
+);
```
-3. Create a CatchAll Route (404 page)
+3. Create a catch-all route (404 page)
-We can create catchall routes for pages not found at any nested level of the router. We use `*` and optionally the name of a parameter to retrieve the rest of the path.
+We can create catch-all routes for pages not found at any nested level of the router. We use `*` and optionally the name of a parameter to retrieve the rest of the path.
```jsx
import { render } from "solid-js/web";
@@ -114,20 +137,23 @@ import Home from "./pages/Home";
import Users from "./pages/Users";
import NotFound from "./pages/404";
-const App = props => (
+const App = (props) => (
<>
-