Nextjs -Express App.render “路径”参数必须是字符串类型。接收到的类型对象

Question

我使用 Nextjs 和 Express.js。我将应用文件夹中的 nextjs 根文件夹分开，如下所示：

app->pages->
     -_app.js
     -login.js
     -index.js

当我添加这个时：

app.get('*', (req, res) => {
    const parsedUrl = parse(req.url,true);
    const {pathname, query = {} } = parsedUrl;
    const route = routes[pathname];

    /**
     * Pull in front end routes and check request against those routes
     * 
     */
    if(route){
        return app.render(req,res,route.page,query);
    }
     handle(req, res) // for all the react stuff
});

我遇到了这样的错误：

请注意，页面将在您首次加载时进行编译。准备好 http://localhost:3000 TypeError [ERR_INVALID_ARG_TYPE]：“路径” 参数必须是字符串类型。接收到的类型对象 在 assertPath (path.js:39:11) 在 extname (path.js:835:5) 在新视图 (D:\WEBSITE\MENPRO\TRACER-STUDY-NEXTJS\node_modules\express\lib\view.js:57:14) 在 Function.render (D:\WEBSITE\MENPRO\TRACER-STUDY-NEXTJS\node_modules\express\lib\application.js:570:12) 在 app.get (D:\WEBSITE\MENPRO\TRACER-STUDY-NEXTJS\server\index.js:77:24)

但是当我删除它时：return app.render(req,res,route.page,query); 再次起作用。

这会发生什么？

我的服务器的完整代码：

const express = require('express');
const bodyParser = require('body-parser');
const next = require('next');
const passport = require('passport');
const session = require('express-session');
const cors = require('cors');
const cookieParser = require('cookie-parser');
const keys = require('./config/keys');
const uuidv4 = require('uuid').v4;
// const path = require('path');
// const RouteAPI = require('./modules');
const dev = process.env.NODE_ENV !== 'production';
const PORT = process.env.PORT || 3000;
const nextApp = next({ dev, dir: "./app" });
const { parse } = require('url');
const handle = nextApp.getRequestHandler()
const getRoutes = require('./routes');
const routes = getRoutes();

nextApp.prepare().then(() => {
    // express code here
    const app = express();
    app.use(session({
        genid: function (req) {
            return uuidv4() // use UUIDs for session IDs
        },
        name: keys.session.name,
        secret: keys.session.secret,
        resave: false,
        saveUninitialized: true,
        rolling: true,
        cookie: {
            secure: false,
            httpOnly: true,
            maxAge: keys.session.maxAge, // satu hari,
            sameSite: true,
        }

    }));
    app.use(passport.initialize());
    app.use(passport.session());
    app.use(cookieParser());

    app.disable('x-powered-by');

    app.use(cors({ origin: keys.origin.url, credentials: true }))



    app.use(bodyParser.urlencoded({ extended: false }));
    app.use(bodyParser.json());

    // app.use((req, res, next) => {
    //     res.header('X-XSS-Protection', '1; mode=block');
    //     res.header('X-Frame-Options', 'deny');
    //     res.header('X-Content-Type-Options', 'nosniff');
    //     res.header("Access-Control-Allow-Origin", keys.origin.url);
    //     next();
    // })


    // app.use('/api/', [
    //     RouteAPI.MahasiswaRoutes
    // ]);


    app.get('*', (req, res) => {
        const parsedUrl = parse(req.url,true);
        const {pathname, query = {} } = parsedUrl;
        const route = routes[pathname];

        /**
         * Pull in front end routes and check request against those routes
         * 
         */
        if(route){
            return app.render(req,res,route.page,query);
        }
         handle(req, res) // for all the react stuff
    });

    app.listen(PORT, err => {
        if (err) throw err;
        console.log(`ready at http://localhost:${PORT}`)
    });
})





// Server static assets if in production

路线

module.exports = () =>{
    return{
        "/":{page:"/"},
        "/login":{page:"/login"},
        "/404":{page:"/404"}
    };
};

Answer 1

啊，是的，我遇到了同样的问题，刚刚找到了解决方案：使用 nextApp.render() 而不是 app.render()

    if(route){
        return nextApp.render(req,res,route.page,query);
    }