Express静态文件URL根据路由变化

Question

我有使用 react-router-dom 的 create-react-app。我还使用快速服务器端渲染来进行 SEO。下面是我的简单快速配置。当我到达“/”路线或任何一级路线（“/contact”、“/blog”等）时，它按预期工作。静态文件作为：

"http://localhost:8080/static/css/main.ec91a01d.css".

但是当我导航到任何多级路由 ("/blog/blog-post-1") 时，它会将第一条路由添加到静态文件 URl 例如：

http://localhost:8080/blog/static/js/main.d9a1d852.js

我做错了什么？此外，文件夹结构是常规 Create-react-app 的结构。我从构建文件夹提供我的 index.html，从 build/static.

提供我的 styles/js

Project
----build
----public
...etc

还有我的server.js

const express = require('express');
const path = require('path');
const ssr = require('./ssr.mjs');

const app = express();

const crawler = async (req, res) => {
  const isBot = req.get('User-Agent').indexOf('Googlebot') > -1 || 
  req.get('User-Agent').indexOf('googlebot') > -1;
  if (isBot) {
    const { html } = await ssr(`http://www.example.com${req.path}`);
    return res.status(200).send(html);
  }
  res.sendFile(path.join(__dirname + '/build/index.html'));
};
app.use(express.static('build'));
app.get('/', crawler);

app.get('/process', crawler);
app.get('/work', crawler);
app.get('/contact', crawler);
app.get('/blog', crawler);
app.get('/blog/create-post', crawler);
app.get('/blog/:id', crawler);
app.get('/services', crawler);
app.get('/services/:id', crawler);
app.get('/payments', crawler);



const PORT = process.env.PORT || 8080;

app.listen(PORT, () => console.log('Server started. Press Ctrl+C to quit'));

Answer 1

您似乎在 index.html 中使用相对路径获取资源，例如

<script src="./static/js/main.d9a1d852.js"></script>

你要的是绝对路径：

<script src="/static/js/main.d9a1d852.js"></script>

注意路径开头缺少的 .。

Express静态文件URL根据路由变化

Express static files URL changes based on route

javascript

express

reactjs

create-react-app

react-router-dom