React router sucks

I will preclude this with maybe I was holding the hammer from the wrong end.

Recently I’ve had a front-end app to build and I figured I would use react with react router, I mean hey they’re built to go together, and react is so awesome how could the router not be? Never have more naive words uttered from my oral orifice.

The first gotcha was when you use react router and you have nested routes you have to render this.props.children manually, wtf? I thought the point of a router was to render the pages without so much from me as the react element and the route. This if course has a work around, just don’t use nested routes. But I like my code DRY wet is for the beach, or procreational procedures.

The second gotcha was not every time something renders will it hit the componentWillMount function. It only hits it when the component mounts for the first time. And yea I get it it’s faster to cache the object and not have to initialize it again and rada rada rada. I don’t really care, code should be simple for the developer to understand, and when I have to make another init function that has to be called sometimes when componentDidUpdate is called that adds unnecessary complexity to the code and makes it more confusing, and for a few milliseconds time off? I gander that if that second mount is slow in your app you have other problems to worry about.

So I went and found Navigo, a simple router based on that post on hackernews that goes something along of the lines of “A modern js router in 40 lines.” It’s not 40 lines anymore but it is still sexy, simple and approachable. I love Built a simple wrapper for react apps with it, rendered my within a component, and bam, simple classes now. componentWillMount always gets called when that page is going to load, and no more any need for early returns with this.props.children.