ReactJS: How to have multiple SPA's on the same website
<p>I'm creating an Airbnb clone.</p>

<p>I noticed if I made the whole website one SPA then my nested routes would be a huge mess. I wanted to make each tab it's own SPA, but ran into errors when trying to create multiple SPAs.</p>

<p>What I did was create an App component and then rendered it to the Index.html, that worked!</p>

<p>But when I created a BecomeAHost component, and tried to render it to BecomeAHost.html (a different page) I got an error:</p>

<pre><code>bundle.js:886 Uncaught Invariant Violation: _registerComponent(...):
Target container is not a DOM element.
</code></pre>

<p>My main question is: How do I have multiple ReactJS single page applications on the same website so I don't have about 30 routes all nested together?</p>

<p><strong>Here is the Github repo: <a href="https://github.com/strangebnb/template" rel="noreferrer">https://github.com/strangebnb/template</a></strong></p>

<p>Here is the 2nd component that I'm trying to render on a BecomeAHost.html</p>

<pre><code>import React, { PropTypes } from 'react'
import ReactDOM from 'react-dom';
import {Component} from 'react';
import { Router, Route, Link, IndexRoute, hashHistory, DefaultRoute, IndexLink, browserHistory } from 'react-router'

import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
import {RadioButton, RadioButtonGroup} from 'material-ui/RadioButton';
import ActionFavorite from 'material-ui/svg-icons/action/favorite';
import ActionFavoriteBorder from 'material-ui/svg-icons/action/favorite-border';

const styles = {
  block: {
    maxWidth: 250,
  },
  radioButton: {
    marginBottom: 16,
  },
};


const BecomeAHost = React.createClass ({
  render() {
    return(
      &lt;MuiThemeProvider&gt;
        &lt;div&gt;
          &lt;First/&gt;
        &lt;/div&gt;
      &lt;/MuiThemeProvider&gt;
    )
  }
})

const First = () =&gt; (
  &lt;div&gt;
    &lt;h1&gt;Become an Airbnb host&lt;/h1&gt;
    &lt;p&gt;Start off by creating a listing page. Think of it as a profile page for your place.&lt;/p&gt;
    &lt;br&gt;&lt;/br&gt;
    &lt;p&gt;Step 1&lt;/p&gt;
    &lt;h3&gt;Start with the basics&lt;/h3&gt;
    &lt;h4&gt;Beds, bathrooms, amenities, and more&lt;/h4&gt;
  &lt;/div&gt;
)

ReactDOM.render(&lt;BecomeAHost /&gt;, document.getElementById('host'));
</code></pre>

<p>Here is how I'm trying to render it on the page </p>

<pre><code>&lt;!DOCTYPE html&gt;
&lt;html&gt;
  &lt;head&gt;
    &lt;meta charset="utf-8"&gt;
    &lt;title&gt;Template&lt;/title&gt;
    &lt;link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" rel="stylesheet"&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;div id='host'&gt;Loading...&lt;/div&gt;
    &lt;script src='./bundle/bundle.js' type="text/javascript"&gt;&lt;/script&gt;
  &lt;/body&gt;
&lt;/html&gt;
</code></pre>

<p>I think the error may be that my webpack is configured to only handle my main App (my main App on Index.html does work). Here is my webpack</p>

<pre><code>var webpack = require('webpack');
var path = require('path');

module.exports = {
    entry: {
        main: "./src/App.js"
    },
    output: {
        path: "./public",
        filename: "/bundle/bundle.js"
    },
    devtools: "sourcemap",
    module: {
        loaders: [
            {
                test: /\.jsx?$/,
                exclude: /node_modules/,
                loader: "babel"
            },
      {
        test: /\.scss$/,
        loaders:  ["style", "css", "sass"],
        exclude: /node_modules/
      }
        ]
    }
</code></pre>