React with Node——如何获取多页网站？答案

【问题标题】：React with Node — How To Get Multiple Page Website?React with Node——如何获取多页网站？
【发布时间】：2017-10-23 10:55:06
【问题描述】：

真的是一个很简单的问题。我正在尝试向我的 React 和 Node 网站添加第二个结帐页面。

我认为这可能就像向浏览器路由器添加另一个“结帐”路由一样简单（如下所示）

<BrowserRouter>
   <div>
     <Route exact path="/" component={App}/>
     <Route exact path="/checkout" component={Checkout} />
   </div>
 </BrowserRouter>

但我收到错误“Cannot GET /checkout”，暗示我也必须在节点端做一些事情？这是我当前的 index.js（节点）

if (process.env.NODE_ENV !== 'production') {
  const webpackMiddleware = require('webpack-dev-middleware');
  const webpack = require('webpack');
  const webpackConfig = require('./client/webpack.config.js');
  app.use(webpackMiddleware(webpack(webpackConfig)));
} else {
  app.use("/", expressStaticGzip("client/dist"));
  app.get('*', (req, res) => {
    res.sendFile(path.join(__dirname, 'client/dist/index.html'));
  });
}

目前，我在 react 端有自己的自定义 web 包配置，它捆绑了 js 和 CSS 文件，然后在节点端提供。

感谢您的帮助！

【问题讨论】：

stackoverflow.com/questions/43825829/…
你用的是快递吗？
是的，用我的 index.js 更新了问题，感谢 girogi，现在尝试该解决方案
@giorgi.m 所以使用 app.get('*', ...) 我在生产环境中有这个工作。但是，我仍然无法在开发环境中使用它？

标签： javascript node.js reactjs

【解决方案1】：

您很可能需要更新app.use(webpackMiddleware(webpack(webpackConfig))); 像这样：

app.use(webpackMiddleware(webpack(webpackConfig), {
  publicPath: 'http://localhost:3000/dist',
  index: 'valid/path/to/index.html'
}));

不过，问题可能出在./client/webpack.config.js

如果您想了解如何将其与 HMR、SSR 和 Dev/Prod 环境结合在一起，您可以查看 react-saga-universal repo

【讨论】：