> For the complete documentation index, see [llms.txt](https://refract.js.org/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://refract.js.org/examples/routing.md).

# Routing

## Routing

| callbag                                                                                                                           | most                                                                                                                           | RxJS                                                                                                                           | xstream                                                                                                                           |
| --------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------ | --------------------------------------------------------------------------------------------------------------------------------- |
| [`code`](https://git.io/fAZ1Q) [`live`](https://codesandbox.io/s/github/fanduel-oss/refract/tree/master/examples/routing/callbag) | [`code`](https://git.io/fAZ1y) [`live`](https://codesandbox.io/s/github/fanduel-oss/refract/tree/master/examples/routing/most) | [`code`](https://git.io/fAZ1P) [`live`](https://codesandbox.io/s/github/fanduel-oss/refract/tree/master/examples/routing/rxjs) | [`code`](https://git.io/fAZ1K) [`live`](https://codesandbox.io/s/github/fanduel-oss/refract/tree/master/examples/routing/xstream) |

In this example, a set of tabs are rendered to the screen, with the currently active tab stored in React state.

### Aperture

Two sources are observed in this example:

* The `setActiveTab` callback function.
* The `window.popstate` event.

In addition, a single event is fired when the `aperture` initiates, which sets the initial state to `initialProps.activeTab`.

All three are simply mapped to objects with the desired structure, and merged into a single stream.

### Handler

If the effect's type is `NAVIGATION`, the `handler` calculates the new browser url, and pushes it to `window.history`.

If the effect's type is `STATE`, it calls `setActiveTab` with the new state.

### Result

The end result is a set of tabs whose state is pushed to the browser url as a side-effect.