raviger

React Navigator. A React hook-based router that updates on all url changes. Heavily inspired by hookrouter.

Zero dependencies. Tiny footprint.

> Note: Raviger is considered feature complete and will very likely receive only maintainace patches going forward.

Installation

``
npm i raviger
`

Docs

Complete documentation is available here on GitHub Pages

Quick Start

`jsx
import { useRoutes, Link, useQueryParams } from 'raviger'

const routes = {
'/': () => ,
'/about': () => ,
'/users/:userId': ({ userId }) =>
}

export default function App() {
let route = useRoutes(routes)
return (


`javascript
import { useQueryParams } from 'raviger'

function UserList ({ users }) {
const [{ startsWith }, setQuery] = useQueryParams()

return (


The preferred method for navigation is the component, which uses all the same properties as the standard element, and requires href. Internally uses history.pushState to ensure navigation without a page refresh. If you need to perform programmatic navigation raviger exports a navigate function.

Some routing libraries only trigger React component updates if navigation was triggered using specific methods, such as a specific instance of history. raviger listens for all popstate` events and checks for changes. You can even have two isolated React instances on a page and URL changes will properly trigger raviger hooks.