Skip to content

2.5.0

Compare
Choose a tag to compare
@developit developit released this 17 Apr 23:14
· 145 commits to main since this release
  • New entry: preact-router/match (#150, see below!)
  • Bugfix: Router children with no attributes were causing an exception
  • Build went from 2.8kb to just under 2kb :)

preact-router/match provides two new components: <Match> and <Link>.

Both components are wired up so they respond to URL changes, match based on a path prop you provide.

<Match> expects a function as its only child, and invokes it in response to any routing or rendering with ({ Boolean matches, String path, String url }).

<Link> works just like the built-in Link component, but accepts an activeClassName="xx" prop, which is a CSS class to render when the link's path (or href) is matches the current URL.

import { Match, Link } from 'preact-router/match';

render(
  <div class="app">
    <header>
      <Link activeClassName="is-active" href="/foo">Foo</Link>
      <Match path="/">
        { ({ matches, path, url }) => (
          matches && <pre>{url}</pre>
        ) }
      </Match>
    </header>
    <Router>
      <div default>
        <h2>this is a demo route that always matches</h2>
      </div>
    </Router>
  </div>
)