Nocturnal Pumpkin Maelstrom


    0.1.0 • Public • Published


    A basic routing solution for xow, using xow components.


    Rendering the App

    const {renderTo, dom} = require('xow');
    const {Router, Route} = require('xow-route');
    const Index = require('./pages/index');
    const Basic = require('./pages/basic');
    const ListView = require('./pages/list');
    renderTo(document.getElementById('container'), (
        <Router defaultRoute="/">
            <Route path="/" page={Index} />
            <Route path="/basic" page={Basic} />
            <Route path={/\/list(?:\/(\w+))?/} page={ListView} />

    A page is a xow component that accepts no props. All query params will be provided as props to the page, however. The path prop can be either s string or a RegExp. In the second case, all matched groups will be provided to the page via the routeParams prop.

    A Router can accept a defaultRoute prop, to which the app will go in a case of a "404" error.


    const {dom, children} = require('xow');
    const {Link} = require('xow-route');
    const App = require('./base');
    module.exports = class Main extends App {
        render() {
            const { newTask, list } = this.props;
            return (
                                <Link path="/">Full</Link>
                                <Link path="/basic">Basic</Link>
                                <Link path="/list">List</Link>

    While you can use simple a elements as links, the Link components bipass the server and maintain state.

    The props of Link are:

    • path(required): the url to link to
    • query: the query object to pass (translates to somthing like ?foo=bar)
    • replace: pass true here if you don't want the link to create a new history entry
    • All other props provided are passed AS IS the the rendered a element.

    Exposed API

    const {push, replace} = require('xow-route');
    push('/', {foo: 'bar'}) // go to "/?foo=bar" and sync the router
    replace('/', {foo: 'buzz'}) // change current history entry to "/?foo=buzz" and sync the router


    npm i xow-route

    DownloadsWeekly Downloads






    Last publish


    • oakfang