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>

在路径的开头注意丢失的.。

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

1 个答案: