https://github.com/oakfang/xow-route

Routing components for xow-based applications
https://github.com/oakfang/xow-route

Last synced: 6 days ago
JSON representation

Routing components for xow-based applications

• Host: GitHub
• URL: https://github.com/oakfang/xow-route
• Owner: oakfang
• License: mit
• Created: 2016-05-13T13:39:15.000Z (over 8 years ago)
• Default Branch: master
• Last Pushed: 2016-05-13T13:40:16.000Z (over 8 years ago)
• Last Synced: 2025-01-03T21:39:28.793Z (7 days ago)
• Language: JavaScript
• Size: 3.91 KB
• Stars: 0
• Watchers: 0
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# xow-route

## A basic routing solution for [xow](https://github.com/oakfang/xow), using xow components.

## Usage

### Rendering the App

```js

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'), (

    

        

        

        

    

));

```

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.

### Linking

```js

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 (

            


                

                    


                        TODO

                        

                            Full

                            Basic

                            List

                        

                    

                

                

                    


                        {children(this.props.children)}

                    

                

            

        );

    }

}

```


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

```js

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

```