nested-router.jsx

import React from 'react'
import * as crayon from 'crayon'
import * as react from 'crayon/react'
import * as transition from 'crayon/transition'

const TabA = () => <div>Tab A</div>
const TabB = () => <div>Tab B</div>

export const Items = (nav) => () => {
    const [ tabs, setTabs ] = react.useRouter('tab-view', (tabs, selector) => {
        tabs.use(transition.loader(selector))
        tabs.use(crayon.animate({
            duration: 500
        }))
        tabs.path('/items/tab-a', 
            crayon.animate([{ from: '/**', name: transition.slideLeft }]),
            (req, res) => res.mount(() => <TabA />)
        )
        tabs.path('/items/tab-b', 
            crayon.animate([{ from: '/**', name: transition.slideRight }]),
            (req, res) => res.mount(() => <TabB />)
        )
    })
    return <main>
        <nav>
            <button 
                onClick={() => nav.back()}>
                &gt; Back
            </button>
        </nav>
        <section 
            ref={setTabs}>
        </section>
        <div className="toolbar">
            <button 
                onClick={() => tabs.navigate('/items/tab-a')}>
                Tab A
            </button>
            <button 
                onClick={() => tabs.navigate('/items/tab-b')}>
                Tab B
            </button>
        </div>
    </main>
}

use-router.js

import { useMemo, useState } from "react";
import { Router, create } from "../router";
import * as react from "./react";

export const useRouter = (name, handlers) => {
    const [ ref, setRef ] = useState()
    const [ nav, setNav ] = useState()

    useMemo(() => {
        if (nav || !ref) {
            return
        }
        const router = create()
        router.use(react.router(ref, 'tab-view'))
        handlers(router, '.'+ name)
        router.load()
        setNav(router)
        return () => router.destroy()
    }, [ref])

    return [ nav, setRef ]
}