Simple react router with hooks and named routes

Usage no npm install needed!

<script type="module">
  import reactNamedHooksRouter from '';



Build Status dependencies Status MIT License NPM Version NPM Downloads Install Size

react-named-hooks-router is as simple react router with hooks and named routes.

  • No need to write the url, just the name of the route
  • At any time you can get a full description of the current route with all params
  • pushRoute method for programmatic navigation
  • beforeUnload event with resolve function
  • Full typescript support



import { Router } from 'react-named-hooks-router';
import NotFoundPage from 'components/NotFoundPage';
import HomePage from 'components/HomePage';
import UserPage from 'components/UserPage';
import PhotosPage from 'components/PhotosPage';

const routes = [
    {name: 'home', path: '/', page: HomePage},
    {name: 'user', path: '/user/:id', page: UserPage}, // dynamic segment
    {name: 'photos', path: '/photos/*path', page: PhotosPage}, // wildcard segment

ReactDOM.render(<Router routes={routes} notFoundPage={<NotFoundPage />} />, document.getElementById('root'));


import {useRouter, Link} from 'react-named-hooks-router';

const UserPage = () => {
    // First parameter is onBeforeUnload
    const [test, setTest] = useState(false);
    const [navigateCallback, setNavigateCallback] = useState();
    const handleBeforeUnload = useCallabck(navigate => {
        if (test) navigate();
        else {
            setNavigateCallback(() => navigate);
    }, [test]);
    // Generic for routeParams
    // Callback for beforeUnload effect
    const {routeName, routeParams, pushRoute} = useRouter<{id: number}>(handleBeforeUnload);

    return (
            <p>This is {routeName} {}</p>
            <Link route="user" params={{id: 2}}>User 2</Link>
            {/* Query string parameters as deep objects */}
            <Link route="user" params={{id: 2, user: {name: 'Bob', data: {age: 3, login: 'bob35'}}}}>User 2</Link> {/* Resolve to /user/2? */}
            <button type="button" onClick={() => pushRoute('home')}>Home Page</button>
            <ModalPopup open={!!setNavigateCallback}>Leave page?<br /><button type="button" onClick={() => navigateCallback()}>Yes!</button></ModalPopup>

export default UserPage;