App.Router.js

import React from "react";
import {
  useRouter,
  Link
} from "@reach/router/unstable-hooks";

function Accounts() {
  let route = useRouter({
    ".": () => <div>boring Accounts</div>,
    dope: () => <div>Dope Accounts</div>
  });

  return (
    <div>
      <h2>Accounts</h2>
      <nav>
        <Link to="/accounts">Accounts Home</Link> •{" "}
        <Link to="/accounts/dope">
          Dope Accounts
        </Link>
      </nav>
      {route}
    </div>
  );
}

function App() {
  let route = useRouter({
    ".": () => <div>Home</div>,
    "invoice/:invoiceId": ({ invoiceId }) => (
      <div>Invoice {invoiceId}</div>
    ),
    "accounts/*": () => <Accounts />
  });

  return (
    <div style={{ padding: 20 }}>
      <nav>
        <Link to="/">Home</Link> •{" "}
        <Link to="/accounts">Accounts</Link> •{" "}
        <Link to="/invoice/123">Invoice 123</Link> •{" "}
        <Link to="/accounts/dope">
          Dope Accounts
        </Link>
      </nav>
      <hr />
      <main tabIndex="-1">
        {route}
      </main>
    </div>
  );
}

export default App;