solid-navigator

Solid Navigator is a library that is inspired by vue-router and @solidjs/router.

Quick start

Install it:

npm i solid-navigator
# or
pnpm add solid-navigator

Use it:

import{Router,Route,Outlet,A,Navigate,useNavigate,useLocation,useParams,useMatch,useSearchParams}from'solid-navigator'

Methods

useNavigate

constnavigate=useNavigate();navigate("/app",{replace: true})

useLocation

// path: /app?id=1constlocation=useLocation();{
query: {id: string} search: string
pathname: string
hash: string}

useParams

// path: /chats/:idconstparams=useParams<{id: string}>();{id: string}

useMatch

// path: /chats/1234constmatch=useMatch(()=>"/chats/1234");{
path: "/chats/1234"
params: {}}|null

useSearchParams

// path: /chats?id=1234const[params,setParams]=useSearchParams();params={id: "1234"}|nullsetParams({id: "5678",hello: "Bye"})// path: /chats?id=5678&hello=Bye

Components

Router

constRoot=()=>{return(<div><h1>Header</h1><Outlet/></div>)}constMain=()=>{return(<Routerroot={Root}>
// Routes go here
</Router>)}

Outlet

constMain=()=>{constAppComponent=()=>{return(<div><div><Outletname="drawer"/></div><div><Outletname="content"/></div></div>)}return(<Routerroot={Root}><Routepath="/"component={AppComponent}><Routecomponents={{drawer: Drawer,content: Content}}/></Route></Router>)}

A

constApp=()=>{return(<Ahref="/"replace/>)}

Navigate

constApp=()=>{return(<Navigateto="/"/>)}