Question

我在尝试与反应路由器一起实施多个入口点时遇到了巨大的问题。目的是使用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.run(routes, Router.HistoryLocation, (Handler, state) => {
    React.render(<Handler />, document.getElementById('app'));
});

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

有没有正确的方法用react-router实现多入口点？

Answer 1

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

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

使用react-router

1 个答案: