https://github.com/kyeotic/raviger

React routing with hooks
https://github.com/kyeotic/raviger

react react-hooks routing

Last synced: about 6 hours ago
JSON representation

React routing with hooks

• Host: GitHub
• URL: https://github.com/kyeotic/raviger
• Owner: kyeotic
• License: mit
• Created: 2019-07-19T05:16:50.000Z (over 5 years ago)
• Default Branch: main
• Last Pushed: 2023-08-18T08:34:29.000Z (over 1 year ago)
• Last Synced: 2024-12-15T06:04:53.239Z (7 days ago)
• Topics: react, react-hooks, routing
• Language: TypeScript
• Homepage: https://kyeotic.github.io/raviger/
• Size: 7.19 MB
• Stars: 134
• Watchers: 4
• Forks: 18
• Open Issues: 3
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • Contributing: CONTRIBUTING.md
  • License: LICENSE
  • Codeowners: .github/CODEOWNERS

Awesome Lists containing this project

README

        
# raviger



    

        

    

        

    

        



**R**eact N**avig**at**or**. A React hook-based router that updates on **all** url changes. Heavily inspired by [hookrouter](https://github.com/Paratron/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](https://kyeotic.github.io/raviger/)

# Quick Start

```jsx

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

const routes = {

  '/': () => ,

  '/about': () => ,

  '/users/:userId': ({ userId }) => 

}

export default function App() {

  let route = useRoutes(routes)

  return (

    


      


        Home

        About

        Tom

        Jane

      

      {route}

    

  )

}

```


## Query Strings

```javascript

import { useQueryParams } from 'raviger'

function UserList ({ users }) {

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

  return (

    


    

      Filter by Name

       setQuery({ startsWith: e.target.value})} />

    

    {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.