基于路由的快速静态文件 URL 更改

Question

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

“http://localhost:8080/static/css/main.ec91a01d.css”。

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

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

我做错了什么？此外，文件夹结构是常规 Create-react-app 的结构。我从 build 文件夹提供我的 index.html，从 build/static 提供我的样式/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>

注意路径开头缺少的.。