T8 React Router

Routing

URL-based rendering with at(route, x, y) shown below works similarly to conditional rendering with the ternary operator atRoute ? x : y. It's 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(/^\/sections\/(?<id>\d+)\/?$/, ({ params }) => <Section id={params.id}/>)}
  );
};

Live demo

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

Navigation →