Install this module and save it as a dependency:
npm install --save hookrouter
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.