How to share React Router across different mini apps within the same application

Question

I am experimenting with react in an Angular app. I am currently using ngReact to load react components in my angular app.

I am using react-router (2.8.1) for a section of my app. I created another section and want to use react-router as well. Unfortunately, I am running into problems, the only Router that works and is recognized is the first router I visit. Here is what I've observed.

1. Both Routers load when my app loads the homepage. How do I know? I added a property to the Router object and console.logged the properties in the files the routers are created.
2. If I visit Router A first, Router A works! When I visit the page using Router B, Router B doesn't seem to be recognized and doesn't work, I get the error "Warning: [react-router] Location "/RouteB" did not match any routes". This solution did not work.
3. Do I need to refactor my routers into a large file that includes all my Routes I use with react-router? It seems like I need to refactor everything or I am missing something.
4. I am more familiar with backend routing, specifically using express.Router where an instance is created and the router isn't shared.

Here are snippets of my two Routers that are used in different sections of my app.

Router A:

import React from 'react';
import {Router, Route, browserHistory, IndexRoute} from 'react-router';

/* Note, additional import statements for components */

const Routes = () => (
  <Router history={browserHistory}>
    <Route path="/RouteA">
      <IndexRoute component={UserIndex} />
      <Route path=":RouteAId">
        <IndexRoute component={index} />
        <Route path="user" component={user} />
        <Route path="profile" component={profile} />
        <Route path="preview" component={previewUpdate} />
        <Route path="interest/:interestId/resume" component={CoverLetterRoute} />
      </Route>
      <Route path="*" component={NoMatch} />
    </Route>
  </Router>
);

export default Routes;

Router B:

import React from 'react';
import {Router, Route, browserHistory, IndexRoute} from 'react-router';
import Main from '../components/Main';

const Routes = () => (
  <Router history={browserHistory}>
    <Route path="/onboarding" component={Main} />
  </Router>
);

export default Routes;

Is it possible to have two separate routers like this? Do I need to load all of my routes into one Router? Please comment if you need more information.

Answer 1

Use a single client-side app with a single router by using different routes. This would allow you to share code more easily, and seamlessly link from one part of the app to the other. You'd have to setup your server to serve the same script for both /users and /onboarding.

 var routes = (
      <Route handler={App}>
        <Route path="/users/welcome" handler={Welcome} />
        <Route path="/onboarding">
           {/* onboarding routes here */}
        </Route>
      </Route>
   );

2nd option (not recommended though): Use two different entry points each running its own router. This would isolate each of your apps, and you wouldn't be able to transition from one "app" to the other without a server round trip. You'd have to setup your webpack and server so that it serves different (entry) scripts for /users and /onboarding. And for linking to the other app, you'd have to use the normal <a href> instead of <Link to>.