Routing demo

        import './examples.css';
import { Route, Link } from 'domstatejsx';

const BASE = location.pathname.replace(/\/$/, '');

export default function App() {
  return (
    <Route
      render={() => (
        <>
          <div style={{ display: 'flex', gap: 8, marginBottom: 16 }}>
            <NavLink to={`${BASE}/`}>Home</NavLink>
            <NavLink to={`${BASE}/about`}>About</NavLink>
            <NavLink to={`${BASE}/pages`}>Pages</NavLink>
          </div>
          <Route path={`${BASE}/`} end render={Home} />
          <Route path={`${BASE}/about`} end render={About} />
          <Route path={`${BASE}/pages`} render={Pages} />
        </>
      )}
      NotFound={NotFound}
    />
  );
}

function NavLink({ to, children }) {
  return (
    <Link
      to={to}
      render={({ onClick, isActive }) => (
        <button
          class="dx-btn"
          onClick={onClick}
          style={isActive() ? { background: '#ff6b6b', color: '#fff' } : {}}
        >
          {children}
        </button>
      )}
    />
  );
}

function Home() {
  return <h1>This is home</h1>;
}

function About() {
  return <h1>This is about</h1>;
}

function Pages() {
  return (
    <>
      <h1>This is pages</h1>
      <div style={{ display: 'flex', gap: 8, margin: '8px 0' }}>
        <NavLink to={`${BASE}/pages/1`}>1</NavLink>
        <NavLink to={`${BASE}/pages/2`}>2</NavLink>
        <NavLink to={`${BASE}/pages/3`}>3</NavLink>
      </div>
      <Route path="/:page" end render={Page} />
    </>
  );
}

function Page({ page }) {
  if (['1', '2', '3'].includes(page)) {
    return <h1>This is page {page}</h1>;
  } else {
    return NotFound();
  }
}

function NotFound() {
  return <h1>Page not found</h1>;
}