Declarative routing for the VanJS framework
npm install vanjs-routingThe cleanest, simplest declarative routing solution for the VanJS framework. If you are coming
from React, vanjs-routing feels similar to react-router.


``shell`
yarn add vanjs-routing vanjs-core
`shell`
npm i -S vanjs-routing vanjs-core
1. Declare routes with Router() using a clean, simple and concise syntaxLink()
2. Use instead of a() to navigate between pagesnavigate()
3. Use in areas Link cannot be used. (_E.g._ In a side-effect)getRouterPathname()
4. Access the router internal state
- Get the current pathname with getRouterParams()
- Get the dynamic URL parameters with getRouterQuery()
- Get the query parameters with /help/:section/:topic
5. Supports dynamic URLs (E.g. ) with getRouterParams()Router.basename
6. Supports URL prefixing using . (Useful for sites like Github Pages)
`typescript
import van from "vanjs-core";
import { Router, Link, getRouterParams, navigate } from "vanjs-routing";
const { div, p, button } = van.tags;
function App() {
return Router({
basename: "vanjs-routing", // Optional base name (All links are now prefixed with '/vanjs-routing')
routes: [
{ path: "/", component: HomeComponent },
{ path: "/about", component: AboutComponent },
{ path: "/help/:section", component: HelpComponent }
]
});
}
function HomeComponent() {
return div(p("Home"), Link({ href: "/about?foo=bar" }, "Goto About"), Link({ href: "/help/profile" }, "Goto Help"));
}
function AboutComponent() {
return div(p("About"), Link({ href: "/" }, "Back to Home"));
}
function HelpComponent() {
van.derive(() => {
console.log(getRouterParams()); // { section: "profile" }
});
return div(
p("Help"),
Link({ href: "/" }, "Back to Home"),
button({ onclick: () => navigate("/") }, "Back to Home (Imperative navigation)")
);
}
van.add(document.body, App());
`
- The Router component which you use to define your routesroute
- Each is an object with a path and componentcomponent
- The is a function returning an HTMLElement
`typescript
import { Router } from "vanjs-routing";
Router({
basename?: string,
routes: Array <{
path: string,
component: () => HTMLElement
}>
});
`
- The Link extends the van.tags.a component to tap into the router's internal state for navigationLink
- is a drop-in replacement for van.tags.areplace
- If is set to true, the current route will be replaced with the Link's href when clicked
`typescript
import { Link } from "vanjs-routing";
Link({
replace?: boolean
// Additional van.tags.a props
});
`
- The navigate function is useful in areas where Link cannot be used. For example in a function or side-effectreplace
- If is set to true, the current route will be replaced with href instead of pushing to the history stack.
`typescript
import { navigate } from "vanjs-routing";
navigate(
href,
options ?: {
replace?: boolean
}
)
`
- getRouterPathname() returns the current pathnamegetRouterParams()
- returns the parameter values in a dynamic routegetRouterQuery()
- returns the query parameters
`typescript
import { getRouterPathname, getRouterParams, getRouterQuery } from "vanjs-routing";
// Route path: /home/:section/:topic
// Current URL: https://hello.com/home/learning/science?tab=intro
console.log(getRouterPathname()); // "/home/learning/science"
console.log(getRouterParams()); // { section: "learning", topic: "science" }
console.log(getRouterQuery()); // { tab: "intro" }
`
- 1.1.3package.json
- Update metadata and README documentation1.1.2
- 1.1.0
- Update README documentation
- basename
- Added prop to Router` component.