ReactJS：如何在同一个网站上拥有多个 SPA答案

【问题标题】：ReactJS: How to have multiple SPA's on the same websiteReactJS：如何在同一个网站上拥有多个 SPA
【发布时间】：2017-01-11 20:38:08
【问题描述】：

我正在创建一个 Airbnb 克隆。

我注意到，如果我将整个网站设为一个 SPA，那么我的嵌套路由将一团糟。我想让每个选项卡都成为自己的 SPA，但在尝试创建多个 SPA 时遇到了错误。

我所做的是创建一个 App 组件，然后将其渲染到 Index.html，这样就可以了！

但是当我创建了一个BecomeAHost 组件并尝试将它渲染到BecomeAHost.html（不同的页面）时，我得到了一个错误：

bundle.js:886 Uncaught Invariant Violation: _registerComponent(...):
Target container is not a DOM element.

我的主要问题是：我如何在同一个网站上有多个 ReactJS 单页应用程序，这样我就没有大约 30 条全部嵌套在一起的路由？

这里是 Github 代码库：https://github.com/strangebnb/template

这是我尝试在 BecomeAHost.html 上呈现的第二个组件

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(
      <MuiThemeProvider>
        <div>
          <First/>
        </div>
      </MuiThemeProvider>
    )
  }
})

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

ReactDOM.render(<BecomeAHost />, document.getElementById('host'));

这是我尝试在页面上呈现它的方式

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

我认为错误可能是我的 webpack 配置为仅处理我的主应用程序（我在 Index.html 上的主应用程序确实有效）。这是我的 webpack

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/
      }
        ]
    }

【问题讨论】：

一页中有多个 SPA？这不是单页：P，此外我们无法在没有代码的情况下为您提供帮助
我的意思是我如何在每个页面上都有一个 SPA！抱歉缺少代码。我刚刚编辑了帖子以包含 github repo。
考虑到它在 4 个不同的页面上，这有点困难。让我试试

标签： javascript reactjs components single-page-application

【解决方案1】：

这是因为你的两个页面加载了同一个包，它永远不会同时找到 app 和 host DOM 元素来正确呈现。尝试使用 webpack 的 multiple entry points，然后在每个 .html 中分别要求它们：

{
    entry: {
        a: "./a",
        b: "./b",
        c: ["./c", "./d"]
    },
    output: {
        path: path.join(__dirname, "dist"),
        filename: "[name].entry.js"
    }
}

【讨论】：

谢谢！我一直在寻找3-4个小时。谷歌搜索，“ReactJS 如何在一个网站上拥有多个 SPA”并没有任何用处。
因为如果有多个页面就不是SPA :P
该死，我对网络开发太陌生了，我什至不知道如何正确地用谷歌搜索我的问题。再次感谢你，马特里亚。我赞成您的回答，但由于我没有代表，因此不会公开显示。