active tab with preact-router

layout.js

import { h, Component } from 'preact';
import { Router, Link } from 'preact-router';

function Header({url}) {
  const NavItem = ({href, children}, state) => (
    <li className={href==url ? 'is-active' : ''}><Link href={href}>{children}</Link></li>
  )
  return (
    <section class="hero is-primary">
      <div class="hero-foot">
        <div class="container">
          <nav class="tabs is-boxed">
            <ul>
              <NavItem href="/">Home</NavItem>
              <NavItem href="/blog">Blog</NavItem>
              <NavItem href="/404">404</NavItem>
            </ul>
          </nav>
        </div>
      </div>
    </section>
  )
}
class Layout extends Component {
  render(props, state) {
    const routeChange = ({url}) => this.setState({url})
    return (
      <div>
        <Header url={state.url} className="nav"/>
        <main className="section">
          <Router onChange={routeChange}>
            <Home path="/"/>
            <Blog path="/blog"/>
            <Article path="/blog/:title"/>
            <E404 default/>
          </Router>
        </main>
      </div>
    )
  }
}

export default <Layout/>