页面重新加载后的 ReactJS 和 Next.js 404答案

【问题标题】：ReactJS and Next.js 404 after page reload页面重新加载后的 ReactJS 和 Next.js 404
【发布时间】：2018-10-05 14:56:08
【问题描述】：

我的 Wordpress 博客上有一个 react 前端，如果我运行 node server.js，它会很好用。我可以在任何页面上重新加载，它会按预期工作。

如果我在我的生产服务器上运行node server.js，那么它工作正常。如果我构建并运行设置为运行next start -p 80 的npm run start，则该网站无法正常运行。

这是我的server.js 代码：

const compression = require('compression');
const express = require("express");
const next = require("next");

const dev = process.env.NODE_ENV !== "production";
const app = next({ dev: dev });
const handle = app.getRequestHandler();

app

  .prepare()
  .then(() => {

    const server = express();

    server.use(compression());
    server.use(express.static(__dirname + '/static', { maxAge: 31557600 }));

    server.get('/about', (req, res) => {
      app.render(req, res, '/about');
    });

    server.get('/post/:slug', (req, res) => {
      const queryParams = { slug: req.params.slug, apiRoute: 'post' };
      app.render(req, res, '/post', queryParams);
    });

    server.get('/page/:slug', (req, res) => {
      const queryParams = { slug: req.params.slug, apiRoute: 'page' };
      app.render(req, res, '/post', queryParams);
    });

    server.get('/city/:slug', (req, res) => {
      const queryParams = { slug: req.params.slug, taxonomy: 'city' };
      app.render(req, res, '/category', queryParams);
    });

    server.get('/country/:slug', (req, res) => {
      const queryParams = { slug: req.params.slug, taxonomy: 'country' };
      app.render(req, res, '/category', queryParams);
    });

    server.get('/_preview/:id/:wpnonce', (req, res) => {
      const queryParams = { id: req.params.id, wpnonce: req.params.wpnonce };
      app.render(req, res, '/preview', queryParams);
    });

    server.get("*", (req, res) => {
      return handle(req, res);
    });

    server.listen(process.env.NODE_PORT, err => {
      if (err) throw err;
      console.log("> Ready on port " + process.env.NODE_PORT);
    });

  })

  .catch(ex => {

    console.error(ex.stack);
    process.exit(1);

  });

当服务器运行时，我可以查看页面，当我重新加载时它工作正常。如果我尝试加载博客文章或类别/城市/国家/地区，那么它将始终为 404。

这是 server.js 代码的问题还是 /post 和 /category 的 React 页面中的问题？

【问题讨论】：

您可能有 apache 或 nginx 或类似的在端口 80 上运行。检查应用程序日志消息，如果它在控制台上打印某些内容。
它在运行时显示反应 404 页面，如果我停止反应服务器，则没有任何显示。
是否可以公开测试

标签： reactjs express nextjs

【解决方案1】：

您需要运行npm run build，然后运行npm run start。你需要先构建bundle，否则你的页面和nextjs代码都不会创建。

它可以在 dev 上运行，因为您不需要为 dev 构建 bundle，代码可以直接访问，但这对于生产效率不高。

这是build 和start 的常用代码：

"build": "next build",
"start": "NODE_ENV=production node server.js",

它们需要放在您的package.json 中。你可能已经有了它们，因为你说你正在运行npm run start。

有关更多信息，NextJS 教程将在基础知识的第 9 部分中向您介绍这一点 - Deploying a Next.js App

【讨论】：