个人中心
gpt4 book ai didi

javascript - ReactJS:如何在同一网站上拥有多个 SPA

转载 作者：塔克拉玛干 更新时间：2023-11-02 20:56:39 25 4
gpt4 key购买 nike

我正在创建一个 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 上确实有效)。这是我的网络包

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

最佳答案

那是因为你的两个页面都加载了同一个包，它永远不会同时找到 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"
    }
}

关于javascript - ReactJS:如何在同一网站上拥有多个 SPA，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/39314251/

25 4 0
文章推荐： android - ContentProvider 何时真正创建？
文章推荐： java - 是否有复杂的 Java WorkQueue API？
文章推荐： java - 是否有一种官方方法可以使用 AccountManager 帐户在 Android 上对 Google Data API 进行身份验证？
文章推荐： javascript - 创建一个包含多个选项的下拉列表，其中包含自定义过滤器
塔克拉玛干
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com