带有 react-router 的 webpack 中的多个入口点答案

【问题标题】：Multiple entry-points in webpack with react-router带有 react-router 的 webpack 中的多个入口点
【发布时间】：2015-11-06 14:50:05
【问题描述】：

我在尝试实现多个入口点以及反应路由器时遇到了巨大的问题。目的是实现使用 webpack 做https://github.com/petehunt/webpack-howto 建议的事情。

到目前为止，我目前是这样设置的：

webpack.config.js

entry: {
    entry1: __dirname + './entry1.jsx',
    entry2: __dirname + './entry2.jsx'
}

routes.jsx

export default (
   <Route path='/' name='app' handler={App}>
      <DefaultRoute handler={entry1} />
      <Route name='entry2' handler={entry2}/>
   </Route>
);

每当运行此代码以在客户端上实例化 Router 的实例时

Router.run(routes, Router.HistoryLocation, (Handler, state) => {
    React.render(<Handler />, document.getElementById('app'));
});

Node.js 将尝试在服务器上运行此代码，这显然会失败，因为 DOM 在那里不可用。它会产生错误。

有没有什么合适的方法用 react-router 实现多入口点？

【问题讨论】：

标签： node.js reactjs webpack react-router

【解决方案1】：

我在使用 react-router 的沙箱 webpack-react-boilerplate 存储库中做了类似的事情。

我相信您可能正在寻找的答案在于here，您需要在服务器条目文件中使用React.renderToString 和/或React.renderToStaticMarkup，正如您正确建议的那样，服务器上显然没有DOM。您可以看到客户端入口点here 与服务器入口点有何不同。

【讨论】：