cellog / ion-router

elegant powerful routing based on the simplicity of storing url as state

ion-router

Connecting your url and redux state

Elegant powerful routing based on the simplicity of storing url as state

To install:

$ npm i -S ion-router

New Documentation

Our documentation now lives here

License

MIT License

Thanks

Huge thanks to BrowserStack for providing cross-browser testing on real devices, both automatic testing and manual testing.

ion-router's Issues

Toggle re-generates the higher order component every time the state changes

This means transient input is lost, as form elements are re-generated from scratch every time. This is also a performance killer.

We need to generate the HOC only when component, loading component or else component is changed, which should be a very rare event.

goBack/goForward actions cause exception

when dispatching goBack or goForward, it throws an exception internally

Link with `route` never works

if you use <Link route="routename">Blah</Link> it just fails

leaving a route, paramsToState is not executed for previous route

If we leave a route, the paramsToState and any necessary updateState calls are not executed, leaving the state in an in-between state

enhanced routes need to be store-specific

Currently, enhanced routes are a global variable. We need to attach them to the store instead, or it becomes impossible to use 2 instances of redux inside the same app (which is rare, but it is needed in the documentation website for this very router, so we need to fix this)

Toggle never sets active if the component state isn't loaded yet

Because of this portion of Toggle.jsx:

  const scaffold = (state, rProps) => {
    const loadedTest = !!loaded(state, rProps)
    return {
      ...rProps,
      '@@__isActive': loadedTest && !!isActive(state, rProps),
      '@@__loaded': loadedTest
    }
  }

@@__isActive never returns true when the component isn't loaded. The loadedTest should be removed.

stateExists errors on empty sub-object

selectors.stateExists({}, {
subkey: {
key: {}
}
})

error, tries to access state.subkey.key

Warning: Failed context type: Invalid context `storeSubscription` of type `Subscription` supplied to `Connect(GroupsList)`, expected instance of `Subscription`.

This happens because we use our own version of react-redux, and so 2 versions are being loaded.

see:

reduxjs/react-redux#534
https://medium.com/@dan_abramov/two-weird-tricks-that-fix-react-7cf9bbdef375#.f9e7902k7

query string parse/stringify

Hey,
There were always 2 major painpoints with react router v4:

• No native redux integration
• Query strings stripped away

ion-router seems really cool, but queries are not mentioned anywhere. Any possibility to use them, and how? Could we have some parseQuery and stringifyQuery methods to adapt the functionality?

Thanks, keep it up!

Need a way to quickly debug whether a Toggle is working

If a Toggle doesn't work, we need to easily see whether it is triggering loading or active.

Uncaught Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined.

I am getting the following error:
Uncaught Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined.

if I have multiple <Route> inside <Routes> component. This might be due to React.cloneElement inside Routes.jsx (see http://stackoverflow.com/questions/38011702/how-to-clone-multiple-children-with-react-cloneelement).

Implement custom redux middleware to remove redux-saga dependency

It may work to implement a custom middleware, so we can have different drivers for the router, much like react-dnd does.

race condition on using back/forward to change URL

Because the sagas listening for state changes to update the URL run asynchronously, they tend to run just as the saga listening for URL changes is running. This then causes a back-and-forth update remove of URL based on state and locks up the browser.

The solution is to put an action marking the beginning of state transitions from a URL, and then another action marking the end, much like BEGIN/COMMIT from SQL world. Then the locationFromState listener will simply pause on BEGIN until COMMIT is received.

Love this - wasn't able to get it to work though

Just wanted to say - thank you for making this.
I really don't like all the solutions available now for redux routing and this is more or less what I thought about making on my own. I'm glad someone else is making it :)

Obviously it's in a very early state, but as far as I can tell, it doesn't work with what the guidelines in the README provide.

As far as I can tell, the issue I ran into is that listenForRoutes is never registered, which means that CREATE_ROUTE doesn't really add a route.
At this point I gave up (it's probably surmountable but too much fiddling doesn't really fit into what I'm doing at this time).

If you want any help, let me know.

A few things to note:

1. I couldn't get it to work with create-react-app off the bat, I needed to add require('babel-polyfill') at the top entry point - though other libraries with generators work. Might want to think about building the lib with inlined "regenerator runtime", though I don't remember how to do that.
2. If all works as intended, you'll get CREATE_ROUTE and ADD_ROUTE actions in the redux history for every route that exists. This really pollutes the history and will cause a lot of re-rendering, might want to think of a different solution - all of it should probably be in the initial state of the reducer somehow.