嵌套路由请求解释为对 CSS 文件的请求

Question

甚至不知道如何表达这个问题。

基本上我有一个 React 应用程序，我使用 React-Router 进行路由处理，并使用一个节点服务器在每个请求上发回 index.html 文件并处理静态资产，因为我正在使用 React Router 的 HistoryLocation 配置。将每个请求记录到该服务器，我可以看到转到基本 url 会发送 3 个请求，并且一切正常：

GET / 200 3.795 ms - - GET /static/app.css 200 2.234 ms - - GET /build/bundle.js 200 0.608 ms - -

任何常规的浅层路线也是如此（例如/a）。但是，一旦我尝试访问嵌套路由（例如/a/b），一切都会中断。更具体地说，在窗口中，我收到Uncaught SyntaxError: Unexpected token < 的语法错误，在我的节点服务器的日志中，我收到了这些请求：

GET /a/b 304 2.286 ms - -
GET /a/static/app.css 304 1.061 ms - -
GET /a/build/bundle.js 304 1.004 ms - -

因此，这里的行为似乎是每次我发送页面查看请求时，它都会为给定的嵌套路由发送一个请求，而对于任何其他静态资产，它只会弹出嵌套路由并附加该路由的内容静态资产是该路线的任何其他部分。因此，例如，如果我转到 /a/b/c，我会看到类似 GET /a/b/static/app.css 的内容。

这是我的节点服务器设置：

import express from 'express';
import morgan from 'morgan';
import path from 'path';

const app = express();

const STATIC_PATH = path.join(__dirname, '/../dist');

app.use(morgan('dev'));

app.use(express.static(STATIC_PATH));

app.get('*', (req, res) => {
  res.sendFile('index.html', { root: STATIC_PATH });
});

app.set('port', process.env.PORT || 8000);
app.server = app.listen(app.get('port'), () => {
  console.log('Listening on port %d', app.get('port'));
});

Answer 1

您的网页中可能有静态资源 URL，例如 "static/app.css"，这是一个完全相对的 URL。当您这样做时，浏览器会在与当前网页相同的路径上请求该文件名，并且它将根据当前网页的路径而有所不同。因此，如果您的网页是/a.html，它将请求/static/app.css。如果您的网页是/a/b.html，它将请求/a/static/app.css（这似乎是您所看到的）。

您可能想要的是静态资源的域相对路径，该路径以 / 开头，类似于 "/static/app.css"。前导斜杠使其仅相对于域，而不是相对于网页的路径。然后，无论您的网页的路径是什么，浏览器都会发出相同的请求，因为该路径是相对于域顶部的。

所以，总而言之，HTML 文件是从这个改变的：

<link rel="stylesheet" href="static/app.css"> 

到这里：

<link rel="stylesheet" href="/static/app.css">