Integrating with react-boilerplate

[williamgranli]

Has anyone managed to integrate react-stormpath with the react-boilerplate project? I'm running into problems since react-stormpath has it's own Router. (I'm guessing it's just an extended version of react-router).
To begin with I'm skipping the createRoutes function and just adding them manually in app.js. When I get it to work I'll try to add it to the createRoutes function.

This is what I've done so far:

in app.js:

const rootRoute = {
  component: App,
  childRoutes: createRoutes(store),
};

import { Router, LoginRoute, HomeRoute } from 'react-stormpath';
import LoginPage from './containers/LoginPage/index';
import HomePage from './containers/HomePage/index';
import AuthenticatedRoute from './containers/AuthenticatedRoute/index';

const render = (messages) => {
  ReactDOM.render(
    <Provider store={store}>
      <LanguageProvider messages={messages}>
        <Router
          history={history}
          // routes={rootRoute}
          render={
            // Scroll to top when going to a new page, imitating default browser
            // behaviour
            applyRouterMiddleware(useScroll())
          }
        >
          <HomeRoute path="/" component={HomePage}>
            <IndexRoute component={HomePage} />
            <LoginRoute path="/login" component={LoginPage} />
            <AuthenticatedRoute>
              <Route path="/protected" component={AuthenticatedRoute} />
            </AuthenticatedRoute>
          </HomeRoute>
        </Router>
      </LanguageProvider>
    </Provider>,
    document.getElementById('app')
  );
};

This works fine as long as I keep "routes={rootRoute}" commented out and just add them manually. This, of course, disables the reducer and saga injections. If I try to add the rootRoute object as the routes property to Router, I get the following error:

invariant.js:44 Uncaught Error: Objects are not valid as a React child (found: object with keys {component, childRoutes}). If you meant to render a collection of children, use an array instead or wrap the object using createFragment(object) from the React add-ons. Check the render method of `Router`.
    at invariant (invariant.js:44)
    at traverseAllChildrenImpl (traverseAllChildren.js:144)
    at traverseAllChildren (traverseAllChildren.js:172)
    at Object.forEachChildren [as forEach] (ReactChildren.js:71)
    at Utils.forEachChild (index.js:1097)
    at Utils.deepForEach (index.js:1089)
    at Router._mapMarkedRoutes (index.js:5016)
    at new Router (index.js:4996)
    at eval (ReactCompositeComponent.js:295)
    at measureLifeCyclePerf (ReactCompositeComponent.js:75)

So it seems that the Router from react-stormpath can't handle objects... any idea how to fix this? I've tried to wrap createFragment around the rootRoute object as the error suggests and mapping the child elements out to an array, without success.

Any idea what's going on here and how I could solve it?

[pindlebot]

I was working on the same thing myself the other day.

This isn't particularly helpful, but I think you can't stuff routes in app.js like that because React-Boilerplate handles routes in routes.js via a different mechanism.

[williamgranli]

@focuswish Not sure what you mean. Could you elaborate on "different mechanism"? Also, did you get it to work? If so, what approach did you take?

[marckaraujo]

Anyone put it to work?

[the-overengineer]

@williamgranli @focuswish Does it work if you pull in #174? I did some trial runs with the boilerplate, and didn't run into any issues, but I don't know how complex your use cases are. The issue was that react-router supports defining routes in two ways - as objects (PlainRoute) or as Route components. Our router expected components only.

Thanks for reporting this and the info you provided!

[williamgranli]

@Tweety-FER Not using stormpath in our project anymore, so I won't be able to answer your question reliably, but to my knowledge react-boilerplate's route-generator uses objects (not components). (See function createRoutes in react-boilerplate/app/routes.js).