Skip to content
A hook based router for React
Branch: master
Clone or download
Latest commit 9e6d165 Apr 13, 2019
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
src-docs/pages/en Update 02_routing.md Apr 13, 2019
src Merge pull request #33 from dy/patch-1 Apr 12, 2019
test Add tests for query params Apr 12, 2019
unittest
.gitignore Add gitignore Apr 6, 2019
README.md Update main README Apr 2, 2019
babel.config.js Okay, wth - nobody saw that Apr 8, 2019
package-lock.json Make babel resolve ES2015+ only when pushing to NPM Apr 8, 2019
package.json Version bump Apr 12, 2019

README.md

React Hook Router

A different approach to utilize a routing functionality in react. I am using this router in an application which is running in production right now without any errors so far. Until I found the time to write some real unit/integration tests for this router, it will remain in beta tough.

Tested from React 16.8.1 up to React 16.8.5.

How to install

Well, this is straightforward:

npm i hookrouter

Documentation

Detailed documentation about how to use hookrouter can be found here

A quick example

import {useRoutes} from 'hookrouter';

const routes = {
    '/': () => <HomePage />,
    '/about': () => <AboutPage />,
    '/products': () => <ProductOverview />,
    '/products/:id': ({id}) => <ProductDetails id={id} />
};
	
const MyApp = () => {
    const routeResult = useRoutes(routes);
    
    return routeResult || <NotFoundPage />;
}

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.

You can’t perform that action at this time.