Getting started

Installation

You can add our itsy bitsy router to your app via npm or yarn.

yarn add itsy-bitsy-router
# or
npm install itsy-bitsy-router

Basic routing

Let's start with hard coded routes! First, you will want a router at the top level of your application that knows every route you intend to navigate to, and has a fallback in case there is no match. This is achieved via useRoutes().

You will need to provide a fallback in case no route matches as the second argument.

import { useRouter } from "itsy-bitsy-router";
export default function App() {
  const Router = useRoutes(
    [
      { path: "/", element: <Home /> },
      { path: "/about", element: <About /> },
      { path: "/articles", element: <Articles /> },
    ],
    <FourOhFour />
  );
  return <Router />;
}
function Home() {
  return <h1>Home</h1>;
}
function About() {
  return <h1>About</h1>;
}
function Articles() {
  return <h1>Articles</h1>;
}
function FourOhFour() {
  return <h1>No page found!</h1>;
}

But without navigation, this isn't really nice. This is where the render prop of your Router becomes handy, as well as the Link component

import { Link } from "itsy-bitsy-router";
function App() {
  const Router = useRoutes(/* Same as before */);
  return (
    <Router
      render={({ children }) => (
        <>
          <nav>
            <ul>
              <li>
                <Link to="/">Home</Link>
              </li>
              <li>
                <Link to="/about">About</Link>
              </li>
              <li>
                <Link to="/articles">Articles</Link>
              </li>
            </ul>
          </nav>
          {/* children is the element the router will render */}
          {children}
        </>
      )}
    />
  );
}

Here's the full example in action to play around with.

Match routing

You can use some special syntax to provide parameters from the url path (as opposed to the querystring). You will need to prefix some part of the path you give to useRoutes() with : to make it work, and employ the useParams() hook to retrieve that parameter. No other special syntax is available (like * for example).

function App() {
  const Router = useRoutes(
    { path: "/authors", element: <Authors /> },
    { path: "/authors/:name", element: <Author /> }
  );
  /* Same as last time */
}
function Authors() {
  return (
    <>
      <h1>Authors</h1>
      <ul>
        <li>
          <Link to="/authors/NKJemisin">NK Jemisin</Link>
        </li>
        <li>
          <Link to="/authors/AmalEl-Mohtar">Amal El-Mohtar</Link>
        </li>
      </ul>
    </>
  );
}
function Author() {
  const { name } = useParams();
  return <h1>{name}'s page</h1>;
}

Here's the full example in action to play around with.