Buttermilk Holistic Example

Home.js

export default () => "Home";

index.jsx

import React from "react";
import ReactDOM from "react-dom";

import { Router, RoutingState, Link } from "buttermilk";

const App = props => (
  <div>
    <header>
      <h1>My sweet website</h1>
    </header>

    <nav>
      <Link href="/">Home</Link>
      <Link href="/blep/kitter">Kitter Blep!</Link>
      <Link href="/blep/corg">Corg Blep!</Link>
    </nav>

    <main>{props.children}</main>
  </div>
);

const NotFound = () => (
  <div>
    <h2>Oh noes, a 404 page!</h2>
    <RoutingState>
      {routing => (
        <p>
          No page was found with the path:
          <code>{routing.location.pathname}</code>
        </p>
      )}
    </RoutingState>

    <p>
      <Link href="/">Let's go back home.</Link>
    </p>
  </div>
);

const routes = [
  {
    path: "/",
    render: () => import("./Home").then(mdl => mdl.default),
  },
  {
    path: "/blep/:animal",
    render: routing => (
      <img
        alt="Bleppin'"
        src={
          routing.params.animal === "corg"
            ? "http://static.damnlol.com/media/bc42fc943ada24176298871de477e0c6.jpg"
            : "https://i.imgur.com/OvbGwwI.jpg"
        }
      />
    ),
  },
  {
    path: "*",
    render: () => NotFound,
  },
];

const root = document.body.appendChild(document.createElement("div"));

ReactDOM.render(<Router routes={routes} outerComponent={App} />, root);