solid-navigator


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

$3

`js
const navigate = useNavigate();
navigate("/app", {replace: true})
`

$3

`js
// path: /app?id=1
const location = useLocation();
{
query: {id: string}
search: string
pathname: string
hash: string
}
`

$3

`js
// path: /chats/:id
const params = useParams<{id: string}>();
{
id: string
}
`

$3

`js
// path: /chats/1234
const match = useMatch(() => "/chats/1234");
{
path: "/chats/1234"
params: {}
} | null
`

$3

`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

$3

`jsx
const Root = () => {
return (

Header

)
}

const Main = () => {
return (

// Routes go here

)
}
`

$3

`jsx
const Main = () => {

const AppComponent = () => {
return (

)
}

return (


components={{
drawer: Drawer,
content: Content
}}
/>


)
}
`

$3

`tsx
const App = () => {
return (

)
}
`

$3

``tsx
const App = () => {
return (

)
}