Add a movies route

.\src\components\app.js

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

import Header from "./header";
import Home from "../routes/home";
import Profile from "../routes/profile";
import Movies from "../routes/movies";

export default class App extends Component {
  /** Gets fired when the route changes.
	 *	@param {Object} event		"change" event from [preact-router](http://git.io/preact-router)
	 *	@param {string} event.url	The newly routed URL
	 */
  handleRoute = e => {
    this.currentUrl = e.url;
  };

  render() {
    return (
      <div id="app">
        <Header />
        <Router onChange={this.handleRoute}>
          <Home path="/" />
          <Movies path="/movies" />
          <Profile path="/profile/" user="me" />
          <Profile path="/profile/:user" />
        </Router>
      </div>
    );
  }
}

.\src\components\header\index.js

import { h, Component } from 'preact';
import { Link } from 'preact-router/match';
import style from './style';

export default class Header extends Component {
	render() {
		return (
			<header class={style.header}>
				<h1>Preact App</h1>
				<nav>
					<Link activeClassName={style.active} href="/">Home</Link>
					<Link activeClassName={style.active} href="/movies">Movies</Link>
					<Link activeClassName={style.active} href="/profile">Me</Link>
					<Link activeClassName={style.active} href="/profile/john">John</Link>
				</nav>
			</header>
		);
	}
}

.\src\routes\movies\index.js

import { h, Component } from "preact";
import style from './style';

class Movies extends Component {
  render() {
    return (
      <div class={style.movies}>
        <h2>Movies</h2>
      </div>
    );
  }
}

export default Movies;

.\src\routes\movies\style.css

.movies {
	padding: 56px 20px;
	min-height: 100%;
	width: 100%;
}