cyclejs-community / cyclic-router

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

Problem running example code #169

Closed nikoskalogridis closed 7 years ago

nikoskalogridis commented 7 years ago

I am trying to use cyclic-router and it seems that when a new route event occurs its followed by the default one

function main(sources) {
  const match$ = sources.router.define({
    '/': HomeComponent,
    '/other': OtherComponent
  });

  const page$ = match$.debug().map(({path, value}) => {
    return value(Object.assign({}, sources, {
      router: sources.router.path(path)
    }));
  });

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

Running this example when I enter the url /other the match$ receives 2 events: The first one is a POP event with the path /other and then a "/" event follows. Am I missing something here?

the object in the first event is a {location: {action: "POP",...}, path: "/other"} then the second event object is {location: {action: "PUSH"}, path: "/"}

FeliciousX commented 7 years ago

hey @nikoskalogridis, it seems like your main function returns the router sinks as xs.of( '/' )

that might cause the problem..

you should be doing something like

return {
  DOM: page$.map( c => c.DOM ).flatten(),
  router: page$.map( c => c.router ).flatten()
};
FeliciousX commented 7 years ago

to explain your problem

no matter which component your router loads, the route will be back to the xs.of( '/' )

even removing it entirely would work too right now

nikoskalogridis commented 7 years ago

@FeliciousX thanks a lot for your help. I actually found that moments before I quit and went to bed last night :-) Yes you are right the xs.of("/") was the problem. Wished the readme example was including some text about that. It took me almost two days to figure out.

nikoskalogridis commented 7 years ago

Actually removing the router property entirely would not work. In my case this made the trick page$.map((c) => c.router || xs.never()).flatten() so even if a component does not provide a sink the rest of the components would be able to have access to the router.

Shall I open a PR for including this in the readme of the project. I think it would help other beginners like myself

FeliciousX commented 7 years ago

sure thing! Open a PR and i think @TylorS will review it :)

TylorS commented 7 years ago

Hello @nikoskalogridis, yes in a real application I also us c.router || never() as you mention. PR definitely welcomed.

Thanks for all that you help with @FeliciousX :D

leefsmp commented 7 years ago

Kinda confusing that your "basic usage" example is not working out of the box. Thanks for comments.