ReactJS：如何在同一网站上拥有多个单页应用程序

Question

ReactJS：如何在同一网站上拥有多个单页应用程序

javascriptreactjscomponentssingle-page-application

6

我正在创建一个Airbnb克隆网站。

我发现如果将整个网站设为单页应用程序，那么我的嵌套路由会变得非常混乱。我想让每个标签页都成为自己的单页应用程序，但是在尝试创建多个单页应用程序时遇到了错误。

我的做法是创建一个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/
      }
        ]
    }

- Matt Tran

一个页面上有多个单页应用？那就不是单页了:P，另外如果没有代码我们无法帮助你。 - martriay

我的意思是每个页面上都有一个SPA！抱歉没有代码。我刚刚编辑了帖子，包括GitHub存储库。 - Matt Tran

这有点难，因为它分布在四个不同的页面上。让我试一下。 - Matt Tran

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- martriay · Accepted Answer

原因是两个页面都加载同一个捆绑包，因此它永远无法找到app和host DOM元素以正确呈现。尝试使用webpack的多入口点，然后在每个.html中分别引用它们：

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