如何在不使用路由的情况下将 React Js 管理到多页面应用程序？答案

【问题标题】：How to manage React Js to multiple page app not using routes?如何在不使用路由的情况下将 React Js 管理到多页面应用程序？
【发布时间】：2016-01-11 09:13:28
【问题描述】：

我想对我网站的不同页面实现 React js，例如在首页，注册，登录等。

我看到的所有教程都只使用了 1 个 app.js 我怎么能做到这一点到多页应用程序。

PS 我正在使用 laravel elixir，我将它们组合成 1 个 main.js。

【问题讨论】：

标签： laravel reactjs laravel-elixir

【解决方案1】：

在您希望安装 React 应用的页面中添加安装点。

例如

// main.js
ReactDOM.render(<App props={/* props from somewhere */}/>, document.getElementById('mountingPoint') );

// rendered HTML from pages should have
<div id="mountingPoint"></div>

【讨论】：

【解决方案2】：

我找到了这个https://github.com/christianalfoni/react-webpack-cookbook/wiki/Multiple-entry-points

我认为这更适合我的需要，然后我将只映射文件在我的 laravel 应用中命名。

这样我就不需要将contact_us.php的js代码加载到login.php

【讨论】：

【解决方案3】：

您还可以使用 React Habitat 之类的东西来简化此架构。

使用它，您可以定义一个组件容器，以便它们在您的 DOM 中解析。

例如，在你的 javascript 中你会这样做

import MyComponent from './Components/MyComponent';

...

container.register(MyComponent).as(myComponent);

然后在您的任何 HTML 页面中

<div data-component="myComponent"></div>

它还支持多个容器和异步代码拆分。

【讨论】：