router's Introduction

@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
API
Router
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'))