cyclic-router
cyclic-router copied to clipboard
Add usage of createHref in README
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()
});
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.
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.