Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/maxmilton/solid-router
A light-weight History API based router for Solid.
https://github.com/maxmilton/solid-router
history-api html5-history router routing solid solidjs
Last synced: about 2 months ago
JSON representation
A light-weight History API based router for Solid.
- Host: GitHub
- URL: https://github.com/maxmilton/solid-router
- Owner: maxmilton
- License: mit
- Created: 2021-04-15T03:26:10.000Z (over 3 years ago)
- Default Branch: master
- Last Pushed: 2024-07-18T05:58:06.000Z (5 months ago)
- Last Synced: 2024-10-14T07:09:16.055Z (2 months ago)
- Topics: history-api, html5-history, router, routing, solid, solidjs
- Language: TypeScript
- Homepage:
- Size: 2.54 MB
- Stars: 3
- Watchers: 3
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
[](https://github.com/maxmilton/solid-router/actions)
[](https://codeclimate.com/github/maxmilton/solid-router)
[](https://www.npmjs.com/package/@maxmilton/solid-router)
[](https://bundlephobia.com/result?p=@maxmilton/solid-router)
[](https://github.com/maxmilton/solid-router/blob/master/LICENSE)
# @maxmilton/solid-router
A lightweight History API based router for [Solid](https://github.com/solidjs/solid) with the features you expect.
**Features:**
- SPA routing using [browser History API](https://developer.mozilla.org/en-US/docs/Web/API/History_API)
- Simple — single top level router, no nesting, no context, handles all `` clicks
- Light — [few dependencies](https://npm.anvaka.com/#/view/2d/%2540maxmilton%252Fsolid-router); under the hood it's mostly an abstraction on top of Solid's built-in Switch and Match components + a little handling logic
- Flexible path matching — static paths, parameters, optional parameters, wildcards, and no match fallback
- Optional URL search query params parsing
> Note: This package is not designed to work with SSR or DOM-less pre-rendering. If you need a universal solution use [solid-app-router](https://github.com/solidjs/solid-app-router) instead.
## Installation
```sh
npm install @maxmilton/solid-router
```
or
```sh
yarn add @maxmilton/solid-router
```
## Usage
### Simple + JavaScript
```jsx
import { NavLink, Router, routeTo } from '@maxmilton/solid-router';
import { lazy } from 'solid-js';
import { render, Suspense } from 'solid-js/web';
const routes = [
{
path: '/example',
component: lazy(() => import('./pages/example')),
},
{
path: '/example/:id',
component: lazy(() => import('./pages/example/[id]')),
},
{
path: '/',
component: lazy(() => import('./pages/home')),
},
];
const App = () => (
<>
Home
Examples
>
);
render(App, document.body);
```
### All features + TypeScript
```tsx
import {
NavLink,
Router,
useURLParams,
routeTo,
type Route,
} from '@maxmilton/solid-router';
import { lazy, type Component, type JSX } from 'solid-js';
import { ErrorBoundary, render, Suspense } from 'solid-js/web';
interface ErrorPageProps {
code?: number;
message?: string;
}
const ErrorPage: Component = ({ error }) => (
{error.code} Error
{error.message || 'An unknown error occurred'}
);
const Loading: Component = () =>
Loading...
;
const Nav: Component = () => (
Home
Examples
Redirect
XX
);
const routes: Route[] = [
{
path: '/xx/:x1/:x2?',
component: (props) => {
console.log(props.params); // -> { x1: "...", x2: ... }
const [urlParams, setUrlParams] = useURLParams();
console.log(urlParams()); // -> { ... }
// Add new URL params
setUrlParams({ ...urlParams(), name: 'example', x: [1, 2] }); // -> location.search == "?name=example&x=1&x=2"
// Delete URL params (set to `undefined`)
setUrlParams({ ...urlParams(), x: undefined }); // -> location.search == "?name=example"
// Regular links are still handled by the router
return I'm still handled correctly!;
},
},
{
path: '/example',
component: lazy(() => import('./pages/example')),
},
{
path: '/example/:id',
component: lazy(() => import('./pages/example/[id]')),
},
{
path: '/redirect',
component: () => routeTo('/example', true) as JSX.Element,
},
{
path: '/',
component: lazy(() => import('./pages/home')),
},
];
const App = (): JSX.Element => (
<>
}>
}>
{
const error = new Error('Not found');
error.code = 404;
throw error;
}}
// Scroll to top on route change
onRouted={() => window.scrollTo(0, 0)}
onError={(error) => console.error(error)}
/>
>
);
render(App, document.body);
```
## API
TODO: Write me
## Browser support
No particularly modern JavaScript APIs are used so browser support should be excellent. However, keep in mind [Solid's official browser support](https://github.com/solidjs/solid#browser-support) only targets modern evergreen browsers.
## Bugs
Report any bugs you encounter on the [GitHub issue tracker](https://github.com/maxmilton/new-tab/issues).
## Changelog
See [releases on GitHub](https://github.com/maxmilton/solid-router/releases).
## License
MIT license. See [LICENSE](https://github.com/maxmilton/solid-router/blob/master/LICENSE).
---
© 2024 [Max Milton](https://maxmilton.com)