Difficulties integrating with react-router

[Dan Weaver]

Hi. First off. Great library.
I've forked the router example and altered it to demonstrate a problem I'm having
https://github.com/dweave/react-router-omniscient-example

I'm wondering if anyone has any suggestions on handling this situation. As you see, when there is not a new cursor provided, the components do not rerender. (I'm guessing this is because of how shouldComponentUpdate is implemented). I realize this isn't a bug, but it seems like a tricky problem to solve especially when you have any kind of complex nesting of routes.

Anyone have any suggestions? I realize simply implementing a new shouldComponentUpdate returning true would work for certain views in particular, but this would detract from a lot of the value of omnsicient + immstruct.

Dan

[Torgeir Thoresen]

Hi, and thanks! Yes, the story of react router and omniscient is not quite where we'd want it to be as of today, especially when it comes to passing props to route handlers. To be frank, we haven't really done a lot of stuff with react router yet ourselves.

As omniscient's goal is preventing updates when data does not change, the shouldComponentUpdate would prevent rerenders when components' props/state does not change. Your best bet in this case is probably implementing a mixin that does this for you that you can reuse

var AlwaysRerender = {
  shouldComponentUpdate: function () {
    return true;
  }
};

and then pass it to the component you want to always rerender

var App = component(AlwaysRerender, function () {
  return (
    <div>
      <ul>
        <li><Link to="even">Even</Link></li>
        <li><Link to="odd">Odd</Link></li>
      </ul>
      <RouteHandler {...this.props}/>
    </div>
  );
}).jsx;

[Dan Weaver]

Thanks!

I had an idea. Tell me if it's bad (or perhaps not possible).

I was thinking of just providing a mixin which provides a method for getting a cursor as well as a new implementation of shouldComponentUpdate which checks against that new cursor. This in a sense would be "injecting" an arbitrary cursor (by declaring a path) into into the component. This is a little bit at odds with omniscient's top down philosophy I suppose (basically creating a new top down 'silo').

EDIT: I realized this only solves part of the problem (which is not coupling the cursor assingments with react-router in the first place). Would still need to detect if a route had changed. Still, please let me know if you think that's a reasonable approach. I can work on an example if it's confusing.

Does that make sense? I'm still getting my head around omnsicient / react component life cycle etc.

D

[Dan Weaver]

I'm realizing that this is not really that big a problem.. Components containing a RouteHandler simply need to render every time. nbd. Thanks for your guidance.