ReactJS：複数のSPAを同じWebサイトに置く方法

私はAirbnbクローンを作成しています。ReactJS：複数のSPAを同じWebサイトに置く方法

ウェブサイト全体を1つのSPAにすると、入れ子にされたルートは大きな混乱につながります。私は各タブを独自のSPAにしたかったのですが、複数のSPAを作成しようとするとエラーに遭遇しました。

私が行ったのは、Appコンポーネントを作成し、それをIndex.htmlにレンダリングしたものです。

しかし、私はBecomeAHostコンポーネントを作成し、BecomeAHost.htmlにそれをレンダリングしてみました（別のページ）私はエラーを得た：

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

私の主な質問は：どのように私は、単一の複数ReactJSを持っています同じWebサイト上のページアプリケーションを使用しているため、一緒にネストされた約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は私のメインアプリケーション（my ma） 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/ 
     } 
     ] 
    }

出典

2016-09-04 Matt Tran

1ページに複数のSPA！それは単一のページではありません：P、コードなしであなたを助けることはできません – martriay

私はどのように各ページにSPAを持っていますか？コードの不足については申し訳ありません。私はちょうどgithubリポを含む投稿を編集しました。 –

それは4つの異なるページにあると考えて少し難しいです。私を試してみましょう –

あり、それは正しくレンダリングする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" 
    } 
}

出典

2016-09-04 07:26:34 martriay

ありがとう！私は今3-4時間探しています。グーグルでは、「ReactJSのウェブサイト上に複数のSPAを置く方法」は役に立たなかった。 –

複数のページがある場合はSPAではないので：P – martriay

Dammit、私はweb devには新しくて、私はGoogleの問題を適切にGoogleに知らない。ありがとう、Martriay。私はあなたの答えをupvotedしかし、私は担当者を持っていないので、それは公に表示されません。 –

ReactJS：複数のSPAを同じWebサイトに置く方法

答えて

関連する問題