cyclejs-community / cyclic-router

Router Driver built for Cycle.js
MIT License
109 stars 25 forks source link

Add usage of createHref in README #220

Open rajasegar opened 3 years ago

rajasegar commented 3 years ago

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()
});
ntilwalli commented 3 years ago

Examples exist in the tests, like here. createHref only works if you update the router source for each component like so component({...sources, router: router.path('/about')}). PRs for improving documentation are welcome.

rajasegar commented 3 years ago

I am looking for something like this https://github.com/nakaji-dayo/cyclic-router/tree/master/example But that is using an older version of cyclic-router I guess, the example need not to be as exhaustive like the above, just a simple one to explain how to use createHref from the main page or the components.