Cycle.js routing solution based on awesome universal-router. Works out-of-the-box both server and client side.

Example usage:

Check out example in the repository for the complete, SSR/isomorphic routing example.

In real life scenario, a typical route workflow will look more like this, with the ability to fetch and render route server-side, given data. This along with exposing DOM (and more) in the component:

common/aboutRoute.js

async function aboutRoute({params: {user}}) {
    const userData = await fetch(`${api.USER_API}/${user}`)
        .then(user => user.json());
    
    return function aboutComponent(sources) {
        const user$ = xs.of(userData);
   
        const vtree$ = user$.map(user =>
            div('.users', [
              div('.user-details', [
                  h1('.user-name', user.name),
                  h4('.user-email', user.email),
                  a('.user-website', {href: user.website}, user.website)
              ])
            ]);

        return {
            DOM: vtree$
        }
    }
}

common/routes.js

const routes = [
    {
        path: '/about/:user',
        action: aboutRoute
    }
];

The above async/await is cheap to wrap in try/catch and render a 404 route, or a redirect instead.

---

makeRouterDriver(routes, [options])

Creates a router driver that should eventually return virtual dom (or any) component given route matches the current context. There is an optional options argument object to the function. It may be used for additional history config or passing request url in other non-browser environment (using createMemoryHistory).

routes

Routes is an object compatible with universal-router API.

options

Options is an additional object of options that may include the following properties:

• url : It's the initial router url. Helpful for nodejs environment while rendering the app as a result of receiving req.url.
• historyOptions : Initial configuration object passed to history object. It matches history library API for createBrowserHistory and createMemoryHistory.

---

mockRouterSource(routes, url)

Utility function that mocks the router source for testing purposes. It currently is mandatory to provide url as an object { url: url }. This behaviour may change in future. Check out example in tests.

---

intents

Object that exports all available intents that are used to interact with history API. All possible choices are:

GO
GO_BACK
GO_FORWARD
PUSH
REDIRECT
REPLACE

---

go(n)

Accepts a number of steps to go from this point in the history. Internally, this returns { type: intent.GO, payload } where payload is the n argument.

---

goBack()

Goes back in history, doesn't require an argument. Internally, this returns { type: intent.GO_BACK } with no payload.

---

goForward()

Goes forward in history, doesn't require an argument. Internally, this returns { type: intent.GO_FORWARD } with no payload.

---

push(...any)

Accepts an object of the next, desirable route state to push. Matches history API.Internally, this returns { type: intent.PUSH, payload } where payload is the ...any argument. Heplful for manual, controlled tinkering with history API.

---

redirect(url)

Accepts a string of the new location. Under the hood, it would perform a regular history push. Returns { type: intent.REDIRECT, payload }.

---

replace(...any)

Accepts an object of the next, desirable route state to replace. Matches history API.Internally, this returns { type: intent.REPLACE, payload } where payload is the ...any argument. Just as push, it allows for manual, configurable sense of changes.