https://github.com/supertigerdev/solid-navigator
Solid Navigator is router library that is inspired by vue-router and @solidjs/router.
https://github.com/supertigerdev/solid-navigator
Last synced: 8 months ago
JSON representation
Solid Navigator is router library that is inspired by vue-router and @solidjs/router.
- Host: GitHub
- URL: https://github.com/supertigerdev/solid-navigator
- Owner: SupertigerDev
- License: mit
- Created: 2024-01-18T17:17:22.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2024-07-26T11:32:29.000Z (almost 2 years ago)
- Last Synced: 2025-09-15T01:17:23.513Z (9 months ago)
- Language: TypeScript
- Homepage:
- Size: 97.7 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# solid-navigator
[](https://pnpm.io/)
Solid Navigator is a library that is inspired by vue-router and @solidjs/router.
## Quick start
Install it:
```bash
npm i solid-navigator
# or
pnpm add solid-navigator
```
Use it:
```tsx
import { Router, Route, Outlet, A, Navigate, useNavigate, useLocation, useParams, useMatch, useSearchParams } from 'solid-navigator'
```
## Methods
### `useNavigate`
```js
const navigate = useNavigate();
navigate("/app", {replace: true})
```
### `useLocation`
```js
// path: /app?id=1
const location = useLocation();
{
query: {id: string}
search: string
pathname: string
hash: string
}
```
### `useParams`
```js
// path: /chats/:id
const params = useParams<{id: string}>();
{
id: string
}
```
### `useMatch`
```js
// path: /chats/1234
const match = useMatch(() => "/chats/1234");
{
path: "/chats/1234"
params: {}
} | null
```
### `useSearchParams`
```js
// path: /chats?id=1234
const [params, setParams] = useSearchParams();
params = {
id: "1234"
} | null
setParams({id: "5678", hello: "Bye"}) // path: /chats?id=5678&hello=Bye
```
## Components
### `Router`
```jsx
const Root = () => {
return (
Header
)
}
const Main = () => {
return (
// Routes go here
)
}
```
### `Outlet`
```jsx
const Main = () => {
const AppComponent = () => {
return (
)
}
return (
)
}
```
### `A`
```tsx
const App = () => {
return (
)
}
```
### `Navigate`
```tsx
const App = () => {
return (
)
}