Dynamically created Fragments not rendered on state change

[hisuwh]

I had written a RouteContainer component to render Fragments when given a an array of objects containing a route property and either a component or a another nested routes array.

Implemented like so:

class RouteContainer extends React.Component<RouteContainerProps, {}> {

    public render() {

        const renderRoute = (r: RouteDescription) => {
            if (r.routes && r.routes.length) {
                return <div>{renderRoutes(r.routes)}</div>;
            }

            return <r.component />;
        };

        const renderRoutes = (routes: RouteDescription[]) => (routes.map(r => (
            <Fragment forRoute={r.route} key={r.route}>
                {renderRoute(r)}
            </Fragment>
        )));

        return (<div>{renderRoutes(this.props.routes)}</div>);
    }
}

I realise this undoes one of the ideas of react-little-router that you can pass props into your components, but when you have a tree of connected components this just saves a lot of boiler plate.

However strangely this doesn't work. Clicking links throughout my application the sub states are not correctly rendered. If I hard refresh the page everything displays correctly for the route specified.

Any reason why this wouldn't work? Any suggestions for debugging this?