https://github.com/Paratron/hookrouter

The flexible, and fast router for react that is entirely based on hooks
https://github.com/Paratron/hookrouter

hooks navigation queryparams react router ssr title

Last synced: about 2 months ago
JSON representation

The flexible, and fast router for react that is entirely based on hooks

• Host: GitHub
• URL: https://github.com/Paratron/hookrouter
• Owner: Paratron
• Archived: true
• Created: 2019-02-12T23:45:15.000Z (over 5 years ago)
• Default Branch: master
• Last Pushed: 2022-09-14T03:13:10.000Z (about 2 years ago)
• Last Synced: 2024-05-17T21:46:10.533Z (4 months ago)
• Topics: hooks, navigation, queryparams, react, router, ssr, title
• Language: JavaScript
• Homepage:
• Size: 299 KB
• Stars: 1,506
• Watchers: 22
• Forks: 92
• Open Issues: 65
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# React Hook Router

The modern alternative to react-router.

Tested from `React 16.8.1` upwards.

## How to install

Well, this is straightforward:

    npm i hookrouter

## Typescript

This project is not and will not be written in typescript.

Thanks to the github user [@mcaneris](https://github.com/mcaneris), you can install types via:

    npm i @types/hookrouter

    

I did not check if those types are correct nor will I keep them up to date with future releases. 

    

    

## Documentation

Detailed documentation about how to use hookrouter can be [found here](https://github.com/Paratron/hookrouter/blob/master/src-docs/pages/en/README.md)

## A quick example

```jsx harmony

import {useRoutes} from 'hookrouter';

const routes = {

    '/': () => ,

    '/about': () => ,

    '/products': () => ,

    '/products/:id': ({id}) => 

};

	

const MyApp = () => {

    const routeResult = useRoutes(routes);

    

    return routeResult || ;

}

```

Routes are defined as an object. Keys are the routes, which are matched

against the URL, the values need to be functions that are called when a route

matches. You may define placeholders in your routes with `:something` which

will be forwarded as props to your function calls so you can distribute them

to your components.

The hook will return whatever the route function returned, so you may also return

strings, arrays, React fragments, null - whatever you like.