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 with React 16.8.1.
How to install
Well, this is straightforward:
npm i hookrouter
How to use
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.
Navigation
You can either navigate by importing the function navigate() from the package,
or by importing the modified link component A.
Example with navigate()
import {useRoutes, navigate} from 'hookrouter';
const routes = {
'/': () => <HomePage />,
'/products/:id': ({id}) => <ProductDetails id={id} />
};
const handleClick = () => {
navigate('/products/12');
};
const MyApp = () => {
const routeResult = useRoutes(routes);
return (
<div>
<Button onClick={handleClick}>Show my product</Button>
{routeResult || <NotFoundPage />}
</div>
);
}Example with link component
import {useRoutes, A} from 'hookrouter';
const routes = {
'/': () => <HomePage />,
'/products/:id': ({id}) => <ProductDetails id={id} />
};
const MyApp = () => {
const routeResult = useRoutes(routes);
return (
<div>
<A href="/products/12">Show my product</A>
{routeResult || <NotFoundPage />}
</div>
);
}The A component works internally with a default a HTML tag. It will forward
all props to it, except an onClick function, which will be wrapped by the component,
since it intercepts the click event, stops the default behavior and pushes the
URL on the history stack, instead.
Nesting Routes
You may nest routes so the sub route calls continue to work with a sub part of the url.
Example
This is your main application:
import {useRoutes, A} from 'hookrouter';
const routes = {
'/': () => <HomePage />,
'/about*': () => <AboutArea />
};
const MyApp = () => {
const routeResult = useRoutes(routes);
return (
<div>
<A href="/about/people">Show about area</A>
{routeResult || <NotFoundPage />}
</div>
);
}The asterisk * at the end of the route indicates that the URL will continue
but the later part is handled somewhere else. If the router notices an asterisk
at the end, it will forward the remaining part of the URL to child routers.
See whats done now inside the <AboutArea /> component:
import {useRoutes, A} from 'hookrouter';
const routes = {
'/people': () => 'We are happy people',
'/company': () => 'Our company is nice'
};
const AboutArea = () => {
const routeResult = useRoutes(routes);
return (
<div className="about">
<A href="people">About people</A>
<A href="company">About our company</A>
{routeResult}
</div>
);
}Using redirects
import {useRoutes, useRedirect} from 'hookrouter';
const routes = {
'/greeting': () => 'Nice to meat you 🤤 ',
};
const MyApp = () => {
useRedirect('/', '/greeting');
const routeResult = useRoutes(routes);
return routeResult || 'Not found';
}Rule of thumb: apply the redirect right before you use the routing and everything is fine ;)
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent