在多页面应用中使用React
我一直在玩React，到目前为止，我真的很喜欢它。 我正在用NodeJS构build一个应用程序，并希望在整个应用程序中使用React来实现一些交互式组件。 我不想让它成为单页面的应用程序。
我还没有发现任何在networking上回答以下问题：
如何在多页面应用程序中分解或捆绑我的React组件？
目前我所有的组件都在一个文件中，即使我可能永远不会在应用程序的某些部分加载它们。
到目前为止，我正在尝试使用条件语句通过searchReact将呈现的容器的ID来呈现组件。 我不完全确定React的最佳实践。 看起来像这样
if(document.getElementById('a-compenent-in-page-1')) { React.render( <AnimalBox url="/api/birds" />, document.getElementById('a-compenent-in-page-1') ); } if(document.getElementById('a-compenent-in-page-2')) { React.render( <AnimalBox url="/api/cats" />, document.getElementById('a-compenent-in-page-2') ); } if(document.getElementById('a-compenent-in-page-3')) { React.render( <AnimalSearchBox url="/api/search/:term" />, document.getElementById('a-compenent-in-page-3') ); } 我仍然阅读文档，并没有find我所需要的多页面应用程序。
提前致谢。
目前，我正在做类似的事情。
该应用程序不是一个完整的React应用程序，我正在使用反应dynamic的东西，像评论箱，这是autark。 并可以在任何点包含特殊的参数
但是，我的所有子应用程序都被加载并包含在一个文件all.js ，所以浏览器可以跨页面进行caching。
当我需要将一个应用程序包含到SSR模板中时，我只需要包含一个带有“__react-root”类和特殊ID的DIV（要呈现的React应用程序的名称）
逻辑非常简单：
import CommentBox from './apps/CommentBox'; import OtherApp from './apps/OtherApp'; const APPS = { CommentBox, OtherApp }; function renderAppInElement(el) { var App = APPS[el.id]; if (!App) return; // get props from elements data attribute, like the post_id const props = Object.assign({}, el.dataset); ReactDOM.render(<App {...props} />, el); } document .querySelectorAll('.__react-root') .forEach(renderAppInElement)
<div>Some Article</div> <div id="CommentBox" data-post_id="10" class="__react-root"></div> <script src="/all.js"></script>
你怎么看？
编辑：11/01/2015
我从头开始构build一个应用程序，并且正在学习，但是我认为你正在寻找的是React-Router 。 React-Router将组件映射到特定的URL。 例如：
render(( <Router> <Route path="/" component={App}> <Route path="api/animals" component={Animals}> <Route path="birds" component={Birds}/> <Route path="cats" component={Cats}/> </Route> </Route> <Route path="api/search:term" component={AnimalSearchBox}> </Router> ), document.body)
在search情况下，可以将“term”作为AnimalSearchBox中的一个属性访问：
componentDidMount() { // from the path `/api/search/:term` const term = this.props.params.term }
试试看。 本教程是我对这个和其他相关主题的了解，
原始答案如下：
我在这里find了同样的答案。 看看这个post是否激励你。 如果您的应用程序与我的应用程序类似，则它的区域变化很小，仅在主体中变化。 您可以创build一个小部件，其职责是根据应用程序的状态呈现不同的小部件。 使用stream量体系结构，您可以调度导航操作，更改您的正文窗口小部件切换的状态，从而仅更新页面正文。
这是我现在尝试的方法。
您可以在webpack.config.js文件中为应用程序提供多个入口点：
var config = { entry: { home: path.resolve(__dirname, './src/main'), page1: path.resolve(__dirname, './src/page1'), page2: path.resolve(__dirname, './src/page2'), vendors: ['react'] }, output: { path: path.join(__dirname, 'js'), filename: '[name].bundle.js', chunkFilename: '[id].chunk.js' }, }
那么你可以在你的src文件夹中有三个不同的html文件和它们各自的js文件（page1的例子）：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Page 1</title> </head> <body> <div id="app"></div> <script src="./vendors.js"></script> <script src="./page1.bundle.js"></script> </body> </html>
JavaScript文件：
import React from 'react' import ReactDom from 'react-dom' import App from './components/App' import ComponentA from './components/ReactComponentA' ReactDom.render(<div> <App title='page1' /> <ReactComponentA/> </div>, document.getElementById('app'))
然后可以为每个页面加载不同的React组件。
你在使用CMS吗？ 他们倾向于喜欢改变可能会破坏你的应用程序的url。
另一种方法是使用像React Habitat 。
有了它，你可以注册组件，他们会自动暴露给dom。
例
注册组件：
container.register('AnimalBox', AnimalBox); container.register('AnimalSearchBox', AnimalSearchBox);
那么他们是可以在你的dom这样的：
<div data-component="AnimalBox"></div> <div data-component="AnimalSearchBox"></div>
以上将自动replace您的反应组件。
然后，您也可以自动将属性（或道具）传递给您的组件：
<div data-component="AnimalBox" data-prop-size="small"></div>
这会将size作为您的组件的道具。 还有其他的选项可以传递其他types，比如json，array，int，float等
