react-hooks-router
v0.3.2
Published
A react hooks approach to routing
Downloads
23
Readme
react-hooks-router
A react hooks approach to routing.
This library is a simple wrapper around page.js.
Install
yarn add react-hooks-router
or
npm install react-hooks-router
Define Routes
import { route } from 'react-hooks-router'
export const routes = {
user: (params: { id: string }) => route('/user/:id', params),
faq: '/faq',
login: '/login',
notFound: '*'
}
Use The Hook
import React, { useState } from 'react'
import { routes } from './routes'
import { useRouter } from 'react-hooks-router'
const App: React.FunctionComponent = () => {
const route = useRouter({ routes })
return (
<div>
<h1>{route.name}</h1>
</div>
)
}
export default App
Optional OnRouted Callbacks
Optional onRouted
and onRoutedUnhandled
parameters will be invoked for every matching route change
const onRoutedUnhandled = ({ name, props, path }) => {
console.log(name, 'routed with props', props)
}
const App: React.FunctionComponent = () => {
const route = useRouter({ routes, onRoutedUnhandled })
// ...
}
or a collection of callbacks, one for each route
const onRouted = {
user: ({ name, props, path }) => {},
faq: ({ name, props, path }) => {},
login: ({ name, props, path }) => {},
notFound: ({ name, props, path }) => {}
}
const App: React.FunctionComponent = () => {
const route = useRouter({ routes, onRouted })
// ...
}
Initial Route
When your component is first rendered and before the routing effect has fired, there will be a moment when the current route has not yet been determined. By default useRouter will return { name: 'loading', params: {} }
until the actual route is determined. You can change this by passing in an initialRoute
.
const App: React.FunctionComponent = () => {
const route = useRouter({ initialRoute: { name: 'home', params: {}, path: '' }, routes })
// ...
}