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

Question

甚至不确定如何表达这个问题。

基本上我有一个 React 应用程序，我使用 React-Router 进行路由处理，并使用 Node 服务器在每个请求上发回 index.html 文件并处理静态 Assets ，因为我使用 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 < ，并且在我的 Node 服务器的日志中，我收到了这些请求:

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 - -

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

这是我的 Node 服务器设置:

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

看起来您的网页中可能有类似于 "static/app.css" 的静态资源 URL，这是一个完全相对的 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">