简单的历史推动崩溃

Question

只是尝试愚蠢的东西和玩Cycle.js.并遇到问题.基本上我只有一个按钮.当您单击它时,它会将该位置导航到随机散列并显示它.几乎像一个没有预定义路由的愚蠢路由器.IE浏览器.路线是动态的.再次,这不是任何实际的我只是搞乱一些东西,并试图学习Cycle.js.但点击"添加"按钮后,下面的代码崩溃了.但是位置已更新.如果我实际上只是导航到"#/ asdf",它会显示正确的内容"Hash:#/ asdf".不确定为什么流崩溃并出现错误:

render-dom.js:242 TypeError:无法读取未定义的属性'subscribe'(...)

import Rx from 'rx';
import Cycle from '@cycle/core';
import { div, p, button, makeDOMDriver } from '@cycle/dom';
import { createHashHistory } from 'history';
import ranomdstring from 'randomstring';

const history = createHashHistory({ queryKey: false });

function CreateButton({ DOM }) {
  const create$ = DOM.select('.create-button').events('click')
    .map(() => {
      return ranomdstring.generate(10);
    }).startWith(null);

  const vtree$ = create$.map(rs => rs ?
    history.push(`/${rs}`) :
    button('.create-button .btn .btn-default', 'Add')
  );

  return { DOM: vtree$ };
}

function main(sources) {
  const hash = location.hash;
  const DOM = sources.DOM;

  const vtree$ = hash ?
    Rx.Observable.of(
      div([
        p(`Hash: ${hash}`)
      ])
    ) :
    CreateButton({ DOM }).DOM;

  return {
    DOM: vtree$
  };
}

Cycle.run(main, {
  DOM: makeDOMDriver('#main-container')
});

感谢您的帮助

Answer 1

我会进一步建议使用@cycle/history来改变路线(仅显示相关部分)

import {makeHistoryDriver} from '@cycle/history'
import {createHashHistory} from 'history'

function main(sources) {
  ...
  return {history: Rx.Observable.just('/some/route') } // a stream of urls
}

const history = createHashHistory({ queryKey: false })
Cycle.run(main, {
  DOM: makeDOMDriver('#main-container'),
  history: makeHistoryDriver(history),
})