admin管理员组

文章数量:1386581

I'm creating an Airbnb clone.

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.

What I did was create an App ponent and then rendered it to the Index.html, that worked!

But when I created a BeeAHost ponent, and tried to render it to BeeAHost.html (a different page) I got an error:

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

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?

Here is the Github repo:

Here is the 2nd ponent that I'm trying to render on a BeeAHost.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 BeeAHost = React.createClass ({
  render() {
    return(
      <MuiThemeProvider>
        <div>
          <First/>
        </div>
      </MuiThemeProvider>
    )
  }
})

const First = () => (
  <div>
    <h1>Bee 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(<BeeAHost />, document.getElementById('host'));

Here is how I'm trying to render it on the page 

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

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

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

I'm creating an Airbnb clone.

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.

What I did was create an App ponent and then rendered it to the Index.html, that worked!

But when I created a BeeAHost ponent, and tried to render it to BeeAHost.html (a different page) I got an error:

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

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?

Here is the Github repo: https://github./strangebnb/template

Here is the 2nd ponent that I'm trying to render on a BeeAHost.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 BeeAHost = React.createClass ({
  render() {
    return(
      <MuiThemeProvider>
        <div>
          <First/>
        </div>
      </MuiThemeProvider>
    )
  }
})

const First = () => (
  <div>
    <h1>Bee 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(<BeeAHost />, document.getElementById('host'));

Here is how I'm trying to render it on the page 

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Template</title>
    <link href="https://fonts.googleapis./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>

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

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/
      }
        ]
    }
  • javascript
  • reactjs
  • ponents
  • single-page-application
Share Improve this question edited Sep 4, 2016 at 7:31 Matt Tran asked Sep 4, 2016 at 6:42 Matt TranMatt Tran 1132 silver badges9 bronze badges 3
  • Multiple SPA in one page? that's no single page :P, besides we can't help you without code – martriay Commented Sep 4, 2016 at 7:00
  • I mean how do I have a SPA on each page! Sorry about lack of code. I just edited post to include github repo. – Matt Tran Commented Sep 4, 2016 at 7:18
  • It's a bit hard considering it's on 4 different pages. Let me attempt – Matt Tran Commented Sep 4, 2016 at 7:26
Add a ment  | 

1 Answer 1

Reset to default 5

That's because both of your pages loads the same bundle, it will never find both the app and the host DOM elements to render correctly. Try using webpack's multiple entry points and then require them separately in each .html:

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

本文标签： javascriptReactJS How to have multiple SPA39s on the same websiteStack Overflow

版权声明：本文标题：javascript - ReactJS: How to have multiple SPA&#39;s on the same website - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1744559357a2612675.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。