omi-page

基于 page.js 的 Omi 路由。

→ demo

使用:

import { render, tag, WeElement } from 'omi'
import page from 'omi-page'
@tag('my-app')
class MyApp extends WeElement {
    installed() {
        page('/', this.index)
        page('/about', this.about)
        page('/contact', this.contact)
        page('/contact/:contactName', this.contact)
        page('*', this.notfound)
        page()
    }
    render() {
        return (
            <div>
                <ul>
                    <li><a href="/">/</a></li>
                    <li><a href="/about">/about</a></li>
                    <li><a href="/contact">/contact</a></li>
                    <li><a href="/contact/me">/contact/me</a></li>
                    <li><a href="/contact/me?a=b">/contact/me?a=b</a></li>
                    <li><a href="/not-found?foo=bar">/not-found</a></li>
                </ul>
                <p>
                    {this.data.path}
                </p>
            </div>
        )
    }
    index = (ctx) => {
        this.data.path = ctx.path
        this.update()
    }
    about = (ctx) => {
        this.data.path = ctx.path
        this.update()
    }
    contact = (ctx) => {
        this.data.path = ctx.path
        this.update()
    }
    notfound = (ctx) => {
        this.data.path = ctx.path
        this.update()
    }
}
render(<my-app></my-app>, 'body')

如果你知道 express，page.js 完全受 express 启发。了解 express 你就肯定能够快速上手 omi-page。