able-baker/app.tsx

33 lines
802 B
TypeScript

import {Route, useRoute} from ">able/iso-router.tsx";
const Tracer =()=>
{
const {nestedDepth, pathIndex} = useRoute();
return <div>Depth: {nestedDepth}, Index:{pathIndex}</div>
}
export default ()=><div>
<h1 class="p-4 bg-red-500 text-white">App</h1>
<nav class="flex gap-10 p-6">
<a href="/">Home</a>
<a href="/about">About</a>
</nav>
<Route path={[]}>
<p>home page! <Tracer/></p>
</Route>
<Route path={["about"]}>
<nav class="flex gap-10 p-6">
<a href="/about/more">more</a>
</nav>
<Route path={[]}>
<p>About page! <Tracer/></p>
</Route>
<Route path={["more"]}>
<p>more!<Tracer/></p>
</Route>
</Route>
</div>;