Routing

The Route and Link components are inspired by react-router. Each Route accepts a path property and a render function. It renders the result of that function when the browser’s path matches the component’s path. If the path has parameters (eg /pages/:page), the values of those parameters are passed as props to the rendered component.

Link accepts a to property and renders a button that navigates to that path. It also accepts a render function receiving { onClick, isActive } so you can style the active link.

If no route matches, the closest parent Route with a NotFound property renders it.

Live example

The router drives the browser URL with history.pushState, so it runs on a dedicated page to keep it isolated from the docs navigation. Navigating works in-session; a hard refresh on a sub-path may 404 in the dev server.

Here it is in code:

export default function App() {
  return (
    <Route path="" NotFound={() => <h1>Page not found</h1>}>
      {() => (
        <>
          <div>
            <Link to="/">Home</Link>
            <Link to="/about">About</Link>
            <Link to="/pages">Pages</Link>
          </div>
          <Route path="/" end>
            {() => <h1>This is home</h1>}
          </Route>
          <Route path="/about" end>
            {() => <h1>This is about</h1>}
          </Route>
          <Route path="/pages">
            {() => (
              <>
                <h1>This is pages</h1>
                <div>
                  <Link to="/pages/1">1</Link>
                  <Link to="/pages/2">2</Link>
                  <Link to="/pages/3">3</Link>
                </div>
                <Route path="/:page" end>
                  {({ page }) => <h1>This is page {page}</h1>}
                </Route>
              </>
            )}
          </Route>
        </>
      )}
    </Route>
  );
}