Animated Routes

About.jsx

import React from 'react'

export const About = (req, nav) => () => (
    <main>
        <nav>
            <div>
                <button onClick={() => nav.navigate('/home')}>Home</button>
                <button onClick={() => nav.navigate('/about')}>About</button>
            </div>
            <div>
                <button onClick={() => nav.navigate('/more')}>More &gt;</button>
            </div>
        </nav>
        <h1>{ req.pathname }</h1>
    </main>
)

Home.jsx

import React from 'react'

export const Home = (req, nav) => () => (
    <main>
        <nav>
            <div>
                <button onClick={() => nav.navigate('/home')}>Home</button>
                <button onClick={() => nav.navigate('/about')}>About</button>
            </div>
            <div>
                <button onClick={() => nav.navigate('/more')}>More &gt;</button>
            </div>
        </nav>
        <h1>{ req.pathname }</h1>
    </main>
)

More.jsx

import React from 'react'

export const More = (req, nav) => () => (
    <main>
        <nav>
            <div>
                <button onClick={() => nav.back()}>&lt; Back</button>
            </div>
        </nav>
        <h1>{ req.pathname }</h1>
    </main>
)