Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Basic support for modularity using react-router #5

Open
chmanie opened this issue Jul 12, 2016 · 1 comment
Open

Basic support for modularity using react-router #5

chmanie opened this issue Jul 12, 2016 · 1 comment

Comments

@chmanie
Copy link

chmanie commented Jul 12, 2016

I have a proposition on how mantra could support react-router (as discussed here) while maintaining modularity and not changing the mantra API at all.

We can use the "huge apps" pattern to do the route setup inside the mantra modules (routes.jsx as it is now).

The only thing we'd need to do is return the resulting route configuration here like this:

const routes = this._routeFns.map(routeFn => {
  const inject = comp => {
    return injectDeps(this.context, this.actions)(comp);
  };
  return routeFn(inject, this.context, this.actions);
});

this._routeFns = [];
this.__initialized = true;

return routes;

Or, if you plan to use to return something else from init() in the future:

return { routes };

Then one could use the react route objects to build up the react-router root like this:

const {routes} = app.init();

const rootRoute = {
  childRoutes: [ {
    path: '/',
    component: require('./components/App'),
    childRoutes: routes
  } ]
}

render((
  <Router
    history={browserHistory}
    routes={rootRoute}
  />
), document.getElementById('react-root'))

I think this would provide a great deal of flexibility and open the way for users who want to use react-router (or any other routing library for that matter) using a minimal invasive change.

I'd be happy to discuss this further and also eventually provide a PR for this. Let me know what you think.

@khayong
Copy link

khayong commented Jul 16, 2016

There is a way where we can create the rootRoute object on Application Context and let each modules to assign their own route to the rootRoute, similar to FlowRouter.

configs/context.js

export default function () {
  return {
    Meteor,
    Collections,
    RootRoute: {
        childRoutes: []
    }
  }
}

modules/core/routes.jsx

export default function (injectDeps, {RootRoute}) {
  RootRoute.childRoutes.push({
    path: '/',
    component: require('./components/App'),
    childRoutes: []  
  }); 
}

render((
  <Router
    history={browserHistory}
    routes={RootRoute}
  />
), document.getElementById('react-root'))

for the other module to assign route, modules/calendar/routes.jsx

export default function (injectDeps, {RootRoute}) {
  RootRoute.childRoutes[0].childRoutes.push({
    path: 'calendar',
    getComponent(nextState, cb) {
      require.ensure([], (require) => {
        cb(null, require('./components/Calendar'))
      })
    }
  })
}

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants