:earth_americas: URL router for Preact.
Router
's onChange
prop (#215, thanks @cmaster11)activeClassName
😗😊😟😉🐧🐧🐧🐧🔊 (#228, thanks @samccone)Big thanks to @Alexendoo for his work on improving TypeScript support. This release is entirely all him! 😍
Thanks to @Alexendoo for all the hard work on types!
Object.assign()
introduced in 2.5.0
.preact-router/match
's Link
now uses preact-router
's Link
so it will always do custom routing.preact-router/match
(#150, see below!)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>
)