Javascript 表示基于路由的静态文件URL更改

我已经创建了使用react路由器dom的react应用程序。我还使用express服务器端渲染进行SEO。下面是我的简单express配置。当我到达“/”路线或任何一级路线（“/contact”、“/blog”等）时，它按预期工作。静态文件的形式如下：

“”

但当我导航到任何多级路由（“/blog/blog-post-1”）时，它会将第一个路由添加到静态文件URl中：

我做错了什么？此外，文件夹结构与常规的Create-react应用程序相同。我在build文件夹中提供my index.html，在build/static中提供my 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'));

---

您似乎正在使用

index.html

中的相对路径获取资源，例如

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

您需要的是绝对路径：

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

---

请注意路径开头缺少的

。

在构建my index.html时，css的

href

和js的

src

以

/static/..

开头，这意味着当前浏览器位置不相关。我不确定您是否一定做错了什么，服务器端渲染和react路由器可能根本无法协同工作。另外，当对它们进行爬网时。要添加到这一点：如果您的src看起来像这个

static/js/blah/blah/blah.js

，那么这也是一个相对路径。开头的

/

使它成为一条绝对路径。