React routing with hooks
npm install 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.
```
npm i raviger
Complete documentation is available here on GitHub Pages
`jsx
import { useRoutes, Link, useQueryParams } from 'raviger'
const routes = {
'/': () =>
'/about': () =>
'/users/:userId': ({ userId }) =>
}
export default function App() {
let route = useRoutes(routes)
return (
Query Strings
`javascript
import { useQueryParams } from 'raviger'function UserList ({ users }) {
const [{ startsWith }, setQuery] = useQueryParams()
return (
{users.filter(u => !startsWith || u.name.startsWith(startsWith).map(user => (
{user.name}
)))}
)
}
`Navigation
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.