Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/LXSMNSYC/solid-tiny-router
Tiny routing library for SolidJS
https://github.com/LXSMNSYC/solid-tiny-router
router solid-js
Last synced: about 1 month ago
JSON representation
Tiny routing library for SolidJS
- Host: GitHub
- URL: https://github.com/LXSMNSYC/solid-tiny-router
- Owner: lxsmnsyc
- License: mit
- Created: 2021-11-05T02:32:43.000Z (about 3 years ago)
- Default Branch: main
- Last Pushed: 2022-05-27T02:03:55.000Z (over 2 years ago)
- Last Synced: 2024-11-01T14:03:24.455Z (about 1 month ago)
- Topics: router, solid-js
- Language: TypeScript
- Homepage:
- Size: 520 KB
- Stars: 23
- Watchers: 3
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome-solid-js - Solid Tiny Router - Tiny routing library for SolidJS (📦 Components & Libraries / Routing)
README
# solid-tiny-router
> Tiny routing library for SolidJS
[](https://www.npmjs.com/package/solid-tiny-router) [](https://github.com/airbnb/javascript)[](https://codesandbox.io/s/github/LXSMNSYC/solid-tiny-router/tree/main/examples/all-demo)
## Install
```bash
npm i solid-tiny-router
```
```bash
yarn add solid-tiny-router
```
```bash
pnpm add solid-tiny-router
```
## Features
- Easy to use: Only 2 components and a 2 utility: ``, ``, `useRouter` and `createRouterTree`!
- Link prefetching: load pages ahead of time with `router.prefetch` and ``.
## Usage
```js
import { lazy } from 'solid-js';
import { createRouterTree, Router } from 'solid-tiny-router';
// Declare routes
const routes = createRouterTree([
{
path: '/',
component: lazy(() => import('./pages')),
},
{
path: '/a',
component: lazy(() => import('./pages/a')),
},
{
path: '/b',
component: lazy(() => import('./pages/b')),
},
// Parametized route
{
path: '/parameter/[id]',
component: lazy(() => import('./pages/[id]')),
},
// Wildcard Route
{
path: '/wildcard/[...list]',
component: lazy(() => import('./pages/[...list]')),
},
]);
const NotFound = lazy(() => import('./pages/404'));
export default function App() {
return (
}
/>
);
}
// [id].tsx
export default function ParametizedRoute() {
// Access router
const router = useRouter();
// Access parameters
// For wildcard routes, the params will be an array of string
const id = () => router.params.id;
return (
{'Welcome to '}
{`Page ${id()}`}
!
Go to home
);
}
```
### ``
The main routing component. `` builds a routing switch from `routes` and then reactively matches the pages from the `window.location`. If no matching route is found, `fallback` rendered, which behaves like a 404 page.
### ``
Navigation component. Must be used within pages and components controlled by `. `` controls the page history and prevents page reload when navigating between local pages.
- `prefetch` allows the given page to be prefetched. Defaults to `true`.
- `replace` replaces the current history instead of pushing a new history.
- `scroll` scrolls the window to the top of the page after navigation. (Possible values is `"auto"`, `"smooth"` or just `undefined`, defaults to `"auto"`.)
### `useRouter`
`useRouter` provides the router instance for controlling navigation imperatively. This can only be used within pages and components controlled by ``.
- `pathname` is a reactive property for tracking the `window.location.pathname`.
- `search` is a reactive property for tracking the `window.location.search`.
- `push(url)` pushes a new URL and navigates to the given URL.
- `replace(url)` replaces the current history and navigates to the given URL.
- `prefetch(url, isPriority)` prefetches the given URL.
- `back()` is used to navigate back in history.
- `forward()` is used to navigate forward in history.
- `reload()` performs page reload.
- `params` provides the object based on the parsed URL (if the path of the page is either a wildcard route, a parametized route or a combination of both).
For `push`, `replace`, `back`, and `forward`, you can pass another parameter `opts`:
- `scroll` scrolls the window to the top of the page after navigation. (Possible values is `"auto"`, `"smooth"` or just `undefined`, defaults to `"auto"`.)
### `createRouterTree`
Builds the router tree from an array of `Route`s. This is used by `` to match pages and also to preload component chunks (if `lazy` was used). Must be called outside of the component and is recommended to be called only once.
### SSR
For SSR, you can simply pass a `pathname` and a `search` strings to a `location` object to ``
```js
```
## License
MIT © [lxsmnsyc](https://github.com/lxsmnsyc)