Question

我是新来表达和下一个，并试图将“ localhost：3000 / newpage”和“ localhost：3000 / newpage /”设置为相同的路由，但是当我在末尾添加“ /”时，它显示了404错误。

我正在使用“ next-routes”进行动态路由，并创建了如下所示的route.js文件：

const nextRoutes = require("next-routes");
const routes = (module.exports = nextRoutes());

routes.add("index", "/");
routes.add("newpage", "/newpage/:slug"); //with body parser this doesnt work

我的server.js文件如下所示：

const express = require("express");
const next = require("next");
const routes = require("./routes");
const dev = process.env.NODE_ENV !== "production";
const port = process.env.PORT || 3000;
const app = next({ dev });
const handle = app.getRequestHandler();
const bodyParser = require("body-parser");
const handler = routes.getRequestHandler(app);
app
  .prepare()
  .then(() => {
    const server = express();
    server.use(bodyParser.json()); //with this dynamic routes dont work
    server.use (handler); //with this dynamic routes work but / url show 404

    server.get("*", (req, res) => {
      server.use(handler);
      if (req.url.endsWith("/")) {
        req.url = req.url.slice(0, -1); // works only when using body parser
      }
      return handle(req, res);
    });

    server.listen(port, (err) => {
      if (err) throw err;
      console.log("> Ready on http://localhost:3000");
    });
  })
  .catch((ex) => {
    console.error(ex.stack);
    process.exit(1);
  });

Answer 1

您可以修改获取的URL，然后再将其传递给Next的处理。

const next = require('next');
const express = require('express');
const routes = require('./routes');
const port = process.env.PORT || 3000;
const dev = process.env.NODE_ENV !== 'production';
const app = next({dev});
const handle = app.getRequestHandler();
// const handler = routes.getRequestHandler(app); // redundant line

app.prepare().then(() => {
  const server = express();
  // server.use(handler); // <-- this line is redundant since you need only one handle!
  server.get('*', (req, res) => {
    if (req.url.endsWith('/')) {
      req.url = req.url.slice(0, -1); // remove the last slash
    }
    return handle(req, res);
  });
  server.listen(port, (err) => {
    if (err) throw err;
    console.log('> Ready on http://localhost:3000');
  });
});

工作示例：https://codesandbox.io/s/express-nextjs-react-c47y8?file=/src/index.js

导航到/ form或/ form /

Answer 2

我必须先安装body-parser软件包，然后再使用body-parser。我还更改了文件夹结构，从而不必导入路由。 server.js中的最终代码如下：

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

const dev = process.env.NODE_ENV !== "production";
const port = process.env.PORT || 3000;
const app = next({ dev });
const handle = app.getRequestHandler();

app
  .prepare()
  .then(() => {
    const server = express();

    server.get("*", (req, res) => {
      if (req.url.endsWith("/")) {
        req.url = req.url.slice(0, -1); // remove the last slash
      }

      return handle(req, res);
    });

    server.listen(port, (err) => {
      if (err) throw err;
      console.log("> Ready on http://localhost:3000");
    });
  })
  .catch((ex) => {
    console.error(ex.stack);
    process.exit(1);
  });

Nextjs和Express作为中间件。如何将“ localhost：3000 / newpage”和“ localhost：3000 / newpage /”设置为相同的路由

2 个答案: