I have routes defined like the following. The foo page updates every second.

const routes = {
  '/': h('h1', {}, 'Home'),
  '/test': h('h1', {}, 'test'),
  '/foo': function() {
    return {
      DOM: Rx.Observable.interval(1000).map(i=>h('div', i+''))
    }
  }
};

I use cycle-starter's code to handle the view switch:

function createRouteValue(sources) {
  return function getRouteValue(location) {
    const {value} = switchPath(location.pathname, routes);
    console.log(location.pathname);
    if (typeof value === `function`) {
      const dialogue = value(sources);
      return dialogue;
    }
    return value;
  };
}

function main(sources) {
  const contentView$ = sources.History.map(createRouteValue(sources))
    .flatMap(value => {
      if (value.DOM) {
        return value.DOM;
      }
      return Rx.Observable.just(value);
    });

  const navButtons = NavButtons(sources);

  const view$ = Rx.Observable.just(h('div', [contentView$, navButtons.DOM]));

  return {
    DOM: view$,
    History: navButtons.url$
  };
}

The problem is that once I switch into the foo page, I can't navigate away. I can temporarily navigate to another page, and the location bar updates too, but the foo page always comes back.

This is the test code:

import Cycle from '@cycle/core';
import {div, makeDOMDriver} from '@cycle/dom'
import {makeHistoryDriver} from '@cycle/history' // version 2.0.1
import {makeRouterDriver} from 'cyclic-router'
import {createHistory} from 'history' // version 2.0.1
import Rx from 'rx'

function main(sources) {
    const view$ = Rx.Observable.just("Hello World")
    return {
        DOM: view$
    }
}

const history = createHistory()

console.log("typeof history: " + typeof history)
console.log("typeof history.createLocation: " + typeof history.createLocation)
console.log("typeof history.createHref: " + typeof history.createHref)
console.log("typeof history.push: " + typeof history.push)
console.log("typeof history.listen: " + typeof history.listen)

// Below is the copied from makeHistoryDriver code, just to make sure...
  if (!history || typeof history !== `object` ||
    typeof history.createLocation !== `function` ||
    typeof history.createHref !== `function` ||
    typeof history.listen !== `function` ||
    typeof history.push !== `function`)
  {
    console.log("Test failed")  // <- is not triggered so test is OK
  }

const drivers = {
    DOM: makeDOMDriver("#app"),
    router: makeRouterDriver(makeHistoryDriver(history))
}

Cycle.run(main, drivers)

I use browserify (version 13.0.0). The console output in Chrome is:

typeof history: object
typeof history.createLocation: function
typeof history.createHref: function
typeof history.push: function
typeof history.listen: function
Uncaught TypeError: makeHistoryDriver requires an valid history object containing createLocation(), createHref(), push(), and listen() methods

How come this error is triggered even though history seems to be a valid history object?

There is no such file that you refer in package.json as a main file. Therefore is really hard to import your lib.

From my understanding, from Cycle.js's viewpoint, imperative APIs such as history.replace should be run through drivers.
I think that's why the location object accessible from source observable has some additional functions, like location.replace or location.goBack.
However, I found the initial location is not emitted for 1.1.0, which means I should access the history object myself outside of drivers to use such functions on the initial page.
I tried working around like this,

function makeStartedHistoryDriver() {
  return url$ => {
    let driver = makeHistoryDriver();
    return driver(
      url$.startWith(window.location.pathname)
    );
  };
}

but this duplicates the initial location in history list. (window.location.pathname pushed unnecessarily)
Am I properly understanding the framework?

History 3.0.0 has some breaking changes, need to more closely investigate what they are and how they affect things.

With v3.0.0 it now also provided a dist/ build via npmcdn, we should also now create dist/ build of @cycle/history.

so after using the Universal / Isomorphic example from link here and adding cycle-history I get an issue in app.js on this line

let routeFromClick$ = ext.DOM.select('.link').events('click')
    .doOnNext(ev => ev.preventDefault())
    .map(ev => ev.currentTarget.attributes.href.value);

let ongoingContext$ = ext.context
// this line bellow is throwing the error
    .merge(routeFromClick$).scan((acc, x) => {
      acc.route = x;
      return acc;
    });

TypeError: Cannot read property 'merge' of undefined

Not entirely sure if the app.js function needs to also change?

Hi,
great work. I use Cycle as a replacement to Flux in my React App which uses ReactRouter. I would like to use HistoryDriver so that I can change history state or react to history changes in my services (models) (independent from React).

I assume that I need the same history instance for both and there is no way how to get or set history instance in HistoryDriver.

It would help if I could provide history instance when creating HistoryDriver. Probably by changing to function makeHistoryDriver(config, history) { ... }?

This issue is caused by .distinctUntilChanged() used within the historyDriver function.

Navigating to a new route, followed by hitting the back button and attempting to navigate to the same route fails because distinctUntilChanged is used. When it comes to browser history i'm not entirely certain distinctUntilChanged is required. Has it been put in there for any other particular reason?

<a href='#myAnchor'>...</a>

Expected behaviour: page jumps to anchor element
Actual behaviour: router re-runs current component/app

I can submit a PR if wanted. I think it's just a matter of changing

captureClicks.js:42

if (link && link.indexOf('mailto:') > -1 || link === '#') {
    return;
}

to

if (link && link.indexOf('mailto:') > -1 || link.charAt(0) === '#') {
    return;
}

Something extra may be needed though to scroll down to the appropriate element after render if a hash link is visited directly/typed into address bar (i.e. http://localhost:3000/#myAnchor).