嵌入快递应用程序的CRA打破了快速路由

Question

我创建了一个CRA应用程序，并且有一些加载CRA构建文件的快速路由，例如：

app.get('/files', async (req, res, next) => {
        ...
        try {
            res.format({
                html: function() {
                    const fileLoc = './public/react_ui/build/index.html';
                    const stream = fs.createReadStream(path.resolve(fileLoc));
                    stream.pipe(res);
                }
            });
        } catch (e) {
            next(e);
            res.redirect(SEE_OTHER.http_status, '/login');
        }
    });

在添加CRA之前，Express应用程序公开了/public文件夹，如下所示：

// access to express App code files
app.use(express.static(__dirname + '/public'));

现在我已经嵌入了CRA应用程序，我想要公开这样的构建文件，否则通过构建index.html创建的CRA文件不知道/static/js/*在哪里：

// access to React App build files
app.use(express.static(__dirname + '/public/react_ui/build'));

但是，它打破了快速路由。例如，当我注销应用程序时，应该将我发送到端点/，这会检查我是否登录，如果没有，那么应该将我发送到登录页面，如下所示：

app.get('/', function(req, res) {
...
    isLoggedIn(req, function(status) {
        switch (status.status) {
            case 200:
                res.redirect(303, '/loader');
                break;
            default:
                res.redirect(303, '/login');
        }
    });

});

然而，这就是打破。如果我删除命令以暴露上面的/build文件夹，那么路由再次工作，我被发送到登录页面，但访问CRA页面中断，因为构建文件是NOT FOUND。

// access to React App build files - if removed, routing works again
app.use(express.static(__dirname + '/public/react_ui/build'));

有没有人有任何关于为什么会这样的建议？我不知道这是一个反应应用程序问题，一个明确的问题，或其他什么。任何见解都会有所帮助。

Answer 1

你有相互冲突的路线。

app.js

app.use('/', express.static(__dirname + 'path/to/static/build'));

// Dont use '/' as it used for static route.
app.use('/auth', (req, res) => {
  ...
  isLoggedIn(req, function(status) {
        switch (status.status) {
            case 200:
                res.redirect(303, '/loader');
                break;
            default:
                res.redirect(303, '/login');
        }
    });
})

请注意，您可以使用任何路由进行静态构建。我已经给出了一般惯例。