在多页面应用中使用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等