diff --git a/README.md b/README.md index 0d5a6ab..ea7d11b 100644 --- a/README.md +++ b/README.md @@ -66,3 +66,38 @@ const routes = { '/:id': id => sources => YourComponent({props$: Observable.of({id}), ...sources}) } ``` + +### Dynamically change route + +You can dynamically change route from code by emitting inputs handled by [the history driver](http://cycle.js.org/history/docs/#historyDriver). + +```js +function main(sources) { + // ... + const homePageClick$ = sources.DOM.select(".home").events("click"); + const previousPageClick$ = sources.DOM.select(".previous").events("click"); + const nextPageClick$ = sources.DOM.select(".next").events("click"); + const oldPageClick$ = sources.DOM.select(".old").events("click"); + const aboutPageClick$ = sources.DOM.select(".about").events("click"); + + return { + // ... + router: xs.merge( + // Go to page "/" + homePageClick$.mapTo("/"), + + // Go back to previous page + previousPageClick$.mapTo({ type: "goBack" }), + + // Go forward to next page + nextPageClick$.mapTo({ type: "goForward" }), + + // Go back from 5 pages + oldPageClick$.mapTo({ type: "go", value: -5 }), + + // Go to page "/about" with some state set to router's location + aboutPageClick$.mapTo({ pathname: "/about", state: { some: "state" } }) + ), + }; +} +```