Skip to content

Add usage of createHref in README #220

Description

@rajasegar

As a beginner, it is really confusing how to construct links in the DOM. The example in the README is incomplete without a working example of links. I have tried using createHref after doing a lot of searching, but it is not working and I am getting an error like this:

TypeError: Cannot read property '_namespace' of undefined
    at RouterSource.createHref (VM986 bundle.js:3568)
    at HomeComponent (VM986 bundle.js:3432)
    at MapOp.f (VM986 bundle.js:3562)
    at _try (VM986 bundle.js:17778)

My example source code:

import xs from 'xstream';
import { run } from '@cycle/run';
import { makeDOMDriver, div, p, a } from '@cycle/dom';
import { routerify } from 'cyclic-router';
import { makeHistoryDriver } from '@cycle/history';
import switchPath from 'switch-path';

function HomeComponent(sources) {
  const { router: { createHref }} = sources;
  const aboutLink = createHref('/about');
  const vdom$ = xs.of(false).map(() => div([
    p('Home page'),
    a({ attrs: { href: aboutLink }}, 'About')
  ]));

  return {
    DOM: vdom$
  }
}

function AboutComponent(sources) {
  const vdom$ = xs.of(false).map(() => div([
    p('About page')
  ]));

  return {
    DOM: vdom$
  }
}

function main(sources) {
  const pageSink$ = sources.router.routedComponent({
    '/': HomeComponent,
    '/about': AboutComponent
  })(sources);

  return {
    DOM: pageSink$.map(c => c.DOM).flatten(),
    router: xs.of('/')
  };
}

const mainWithRouting = routerify(main, switchPath);

run(mainWithRouting, {
  DOM: makeDOMDriver('#app'),
  history: makeHistoryDriver()
});

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Fields

    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions