【问题标题】:How to handle client side routing with node.js?如何使用 node.js 处理客户端路由?
【发布时间】:2018-04-06 14:38:03
【问题描述】:

在 node/express 中,我有这个

var express = require('express');
var path = require('path');

// start express module
var app = express();

app.use(express.static(path.join(__dirname, 'public')));

/*
 * Visit the home page
 */
app.get('/', function (req, res) {
    res.sendFile(__dirname + '/index.html');
});

var server = app.listen(process.env.PORT || 3000, function () {
    var host = server.address().address;
    var port = server.address().port;

    console.log('My site started at http://%s:%s', host, port);
});

所以我只能使用主页链接访问我的页面,或者直接指向服务器上的某个文件。

但是在客户端,我使用带有历史 API 的单页应用程序设计,并且有类似 localhost:3000/work 的路由。因此,如果我要转到根页面,有一个按钮使用历史 API 将 url 更改为 /work 并最终显示新内容。

但是,如果我访问 localhost:3000/work maually,node.js 认为我需要找到一个名为 localhost:3000/work/index.html 的文件,并说找不到页面。如何设置让页面请求仍然触发index.html的返回?

谢谢

【问题讨论】:

    标签: javascript node.js routing single-page-application html5-history


    【解决方案1】:

    很抱歉没有写评论(我还不能)。

    不熟悉您的客户端路由设置(您能分享一下吗?)。

    这不是最佳做法,只是为了确保您的客户端设置正常 - 您能否检查一下这是否有效:

    app.get('/', function (req, res) {
        res.sendFile(__dirname + '/index.html');
    });
    
    app.get('*', function (req, res) {
         res.redirect('/');
    });

    【讨论】:

    • 这只是重定向到主页,并删除 /work 部分,因此它最终显示主页内容而不是工作内容。
    • 你在'/work/的客户端有状态或路由吗?可以分享一下代码吗?
    • 在客户端,它只是检查 url,发现路径名是/work 并隐藏默认 div 并显示另一个 div 工作。如果我从主页手动启动并使用历史 api pushstate 代码来更改 url,它就可以正常工作。
    • 没关系,您的原始代码有效,我的代码中有一些错误的路径。
    • 不使用历史推送api,你可以尝试访问“/test”的模拟状态或路由吗?如果您使用历史推送 API,您可能需要更改 html5Mode 中的一些设置。
    猜你喜欢
    • 2016-09-10
    • 1970-01-01
    • 1970-01-01
    • 2014-07-21
    • 2015-11-18
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2020-08-30
    相关资源
    最近更新 更多