1.0.4 • Published 5 years ago
@depack/router v1.0.4
@depack/router
@depack/router
is The Preact Router Component For Compilation With Depack.
yarn add -E @depack/router
The original source code is from preact-router but it was modified to be able to compile front-ends that use it with Depack using Google Closure Compiler.
DEMO: https://dpck.github.io/router/
Connect your Preact components up to that address bar.
preact-router
provides a component that conditionally renders its children when the URL matches their path. It also automatically wires up elements to the router.
Table Of Contents
- [Table Of Contents](#table-of-contents)
- [API](#api)
- [Router](#router)
- [Copyright](#copyright)
API
The package is available by importing its default function and named functions:
import Router, { Link } from '@depack/router'
Router
import Router, { Link } from '@depack/router'
import { render } from 'preact'
const Main = () => (
<div>
<ul>
<li><Link href="/router/">Home</Link></li>
<li><Link href="/about">About</Link></li>
<li><Link href="/search/example/hello">Search</Link></li>
</ul>
<Router onChange={(e) => {
if (e.current && e.current.attributes.title) {
document.title = e.current.attributes.title
}
}}>
<Home path="/router/" title="@depack/router" />
<About path="/about" title="About" />
<Search path="/search/:query/:optional?" title="Search" />
</Router>
</div>
)
const Home = () => (<div>
<h3>Home</h3>
Preact Router For Depack.
</div>)
const About = () => (<div>
<h3>About</h3>
<p><em>Preact</em> is a library for making single-page
websites and rendering JSX components.</p>
<p><em>Depack</em> is front-end bundler that uses Google
Closure Compiler (as well as back-end package compiler).</p>
</div>)
const Search = ({ optional }) => (<div>
<h3>Search</h3>
{optional ? `You've searched for: ${optional}` : ''}
</div>)
render(<Main />, document.querySelector('#preact'))
If there is an error rendering the destination route, a 404 will be displayed.