T8 React Router

Routing

URL-based rendering with at(route, x, y) works similarly to conditional rendering with the ternary operator atRoute ? x : y, equally applicable to props, components and dynamic values:

import { useRoute } from "@t8/react-router";

let App = () => {
  let { at } = useRoute();

  return (
    <header className={at("/", "full", "compact")}>
      <h1>App</h1>
    </header>
    {at("/", <Intro/>)}
    {at(/^\/posts\/(?<id>\d+)\/?$/, ({ params }) => <Post id={params.id}/>)}
  );
};

Live demo

⬥ params in dynamic values contains the route pattern's capturing groups accessible by numeric indices. Named capturing group values can be accessed by their names, like params.id in the example above.

← Intro | Navigation →