https://github.com/supertigerdev/solid-named-router
A named based router for solidjs
https://github.com/supertigerdev/solid-named-router
navigation router solidjs vue
Last synced: about 1 year ago
JSON representation
A named based router for solidjs
- Host: GitHub
- URL: https://github.com/supertigerdev/solid-named-router
- Owner: SupertigerDev
- License: mit
- Created: 2022-10-01T16:00:35.000Z (over 3 years ago)
- Default Branch: main
- Last Pushed: 2022-11-07T16:03:25.000Z (over 3 years ago)
- Last Synced: 2025-01-17T12:45:51.577Z (over 1 year ago)
- Topics: navigation, router, solidjs, vue
- Language: TypeScript
- Homepage:
- Size: 470 KB
- Stars: 9
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Solid Named Router
[](https://pnpm.io/)
A third party router library for solidjs. Includes named routes inspired by vuejs.
This router relies on the [route-parser](https://github.com/Unnamed-Chat-App/route-parser) package.
Note: This library is not complete. Please contribute and submit PRs to improve this library 💖
## Quick start
Install it:
```bash
npm i solid-named-router
```
Wrap your root component with the Router component:
```tsx
import { render } from "solid-js/web";
import { createRouter } from "solid-named-router";
import App from "./App";
const Router = createRouter({
routes: [
{
name: 'Home',
path: '/',
element: () =>
Home
},
{
name: 'Users',
path: '/users/:userId',
element: () => Users
},
]
});
render(
() => (
),
document.getElementById("app")
);
```
Now add the `RouterView` component to display the current route.
```tsx
import {RouterView, Link} from "solid-named-router";
const App = () => {
return (
<>
>
);
};
```
## Methods & Hooks
### Link
```tsx
User
User
```
### navigate
```ts
navigate({name: 'Users', params: {userId: 1234}, query: {hideInfo: "1"}})
navigate('app/users/1234')
```
### useNamedRoute
```ts
const namedRoute = useNamedRoute(); // -> {name, params, pathname, query};
name: {namedRoute.name}
params: {namedRoute.params.userId}
params: {namedRoute.pathname}
```
### useParams
```ts
const params = useParams(); // -> {userId};
name: {params.userId}
```
### Outlet Example
```tsx
const Router = createRouter({
routes: [
{
name: 'Users',
path: '/users/:userId',
elements: {
drawer: () =>
Drawer Here,
content: () => Content Here
},
element: () => (
),
},
]
});
```