如何将 react.js 与多页网站（非 SPA）一起使用？

【问题标题】：How to use react.js with a multi page website (Non SPA)?如何将 react.js 与多页网站（非 SPA）一起使用？
【发布时间】：2015-09-17 02:18:50
【问题描述】：

我有一个 laravel 应用程序。对于具有此类路由的页面：/admin/entity/ 我想将 react 组件与 react 路由器一起使用来处理 /admin/entity/:id 路由。

如果我使用 browserify 将所有组件捆绑在一个文件中，我无法访问任何组件以从外部呈现它，因为 browserify 将其包装为闭包。因此，我有几个问题：

是否应该为每个页面创建单独的 bundle.js 文件并在该文件中显式呈现组件？

或者我应该将每个组件从 jsx 预编译为 js 并从 *.blade.php 文件内联渲染它？

将 react 库包含到 bundle.js 是否有意义，或者我可以从视图中显式加载它？

【问题讨论】：

【解决方案1】：

这是我的意见：

您应该将 React 和您的所有代码捆绑在所有页面中，这些页面的任何部分都将由 React 组件呈现（据我所知，/admin/entity）。
您的 React 组件应始终呈现给特定元素（例如，空的 <div>），并且应配置类似 React Router 的内容，以便它忽略 /admin/entity 但呈现 /admin/entity/:id。您面临的挑战是，任何指向不同 :id URL 的链接都应该最好位于 React 组件内，使用 Link 组件。这将自动连接您的路由器。

您的路线可能如下所示：

<Route path="admin/entity/:id" handler={Entity} />

我相信，当你 run 路由器时，如果浏览器的 URL 不是预期的格式，React 实际上不会渲染任何东西。

【讨论】：