cyclejs-community / cyclic-router

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

Multiple redirects failing in routercomponent #71

Open Steelfish opened 8 years ago

Steelfish commented 8 years ago

I am currently trying to create a routing component based on the example code and the xstream-boilerplate routing component. I am getting stuck on a particular issue for a redirect function.

export function createRedirect (path) {
  const redirect = (sources) => {
    const vTree = xs.of(div('.redirect', 'Redirecting...'));
    const redirect$ = xs.of(sources.router.createHref(path));
    return {
      DOM: vTree,
      router: redirect$
    }
  }
  return sources => isolate(redirect)(sources);
}

I am using this function to let the '/' state redirect to a substate, so that there is always some url qualified substate for the host page component. So for example '/' redirects to '/qualifiedstate'. And this seems to work pretty well, the main component is always redirecting. However if I want to continue the redirect stream by redirecting '/' in qualifiedstate to 'somesubstate', thus: '/' -> '/qualifiedstate' -> 'qualifiedstate/somesubstate', the redirect seems to stop on the vtree created by the redirect component. The redirect then does work for hrefs aimed at '/qualifiedstate', it's only the initial flow from '/' -> '/qualifiedstate' -> '/qualifiedstate/somesubstate' that seems to fail.

I've added my current implementation to a webpackbin: http://www.webpackbin.com/EJYlChBIb, it seems however that the history package will not load there so I can't guarantee it works.

I am not exactly sure where the issue lies, I find it odd that the DOM sink seems to be returned properly but the router sink doesn't, considering they both use the same stream operator. Any insight into the matter would be greatly appreciated.

TylorS commented 8 years ago

I fixed the import to history to work on webpackbin, and a couple of missing imports and variable naming mismatching (drivers -> sources), but ran into a new error.

http://www.webpackbin.com/Nk-T47LIZ

Steelfish commented 8 years ago

I've fixed the issue but it seems webpackbin doesn't play nice with url routing. I've created a repository with a small example app to demonstrate the issue I am facing: https://github.com/Steelfish/cyclic-routingcomponent.

As you can see there, the app is routed from '/' to '/state' but does not enter substate2 when starting at '/. When using a href or visiting '/state' you are properly redirected.