SSR React APP 与 Express 上的静态路由器

Question

我正在尝试在快速服务器上对从头开始制作的反应应用程序进行 SSR。我正在使用静态路由器。 html 加载到浏览器和路由工作，但 css 和 js 包不加载。在网络中，我得到 200 的 js 和 css 但文件类型是 html。这是我第一次使用路由器、服务器端渲染 React 应用程序。该应用程序在呈现客户端时完美运行。我只有一个 WebPack 配置文件

运行 ssr 应用程序时我在终端中遇到的错误是

No routes matched location "/static/client.js" 
No routes matched location "/static/client.7d7fcbbf9b1c53c6d706.css" 
No routes matched location "/static/client.7d7fcbbf9b1c53c6d706.css" 

如果有人对我将如何解决此问题有任何想法，将不胜感激！感谢您的时间。

快速配置

const path=require('path');

const fs=require('fs');

const express=require('express');

const React = require('react');

const ReactDOMServer = require('react-dom/server');

const router = express.Router()

import {StaticRouter} from 'react-router-dom/server'

import Rout from '../src/Menu/router';

const app = express()

const PORT = 9001


const serverrender = (req, res, next)=>{
    const aa = ReactDOMServer.renderToString(<StaticRouter location={req.url}><Rout/></StaticRouter>)
    fs.readFile(path.resolve('./assets/index.html'), 'utf-8',(err, data)  => {
        if(err){
            console.log(err)
        }
        return res.send(data.replace('<div id="root"></div>',
         `<div id="root">${aa}</div>`))
    })
}
router.use(express.static(path.resolve(__dirname, '..', '/assets/static')))
router.use('/', serverrender)

app.use(router)
app.listen(PORT, ()=>{
    console.log(`${PORT}`)
})

WebPack 配置

const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports={
  mode: 'production',
  entry:{
    client: './src/index.js'
  },
  output:{
    path: path.resolve(__dirname, 'assets'),
    filename:"static/[name].js"
  },
  module:{
    rules:[
      {
         test: /\.js$/, exclude: /node_modules/, loader: "babel-loader",
         options: {
          // attach the presets to the loader (most projects use .babelrc file instead)
          presets: ["@babel/preset-env", "@babel/preset-react"]
        }
      },
      {test: /\.css$/i, use: [MiniCssExtractPlugin.loader,'css-loader']},
      {test: /\.(png|jpe?g|gif)$/i, use: ['file-loader']},
    ]
  },
  plugins: [new HtmlWebpackPlugin({ template: path.resolve(__dirname, 'src', 'index.html') }),
  new MiniCssExtractPlugin({ // [2]
    filename: 'static/[name].[hash].css'
 })],
  devServer: {
    //hot: true,
    //historyApiFallback: true,
  },
}

包.json

{
  "dependencies": {
    "@babel/register": "^7.17.0",
    "axios": "^0.24.0",
    "express": "^4.17.2",
    "ignore-styles": "^5.0.1",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-responsive": "^9.0.0-beta.6",
    "react-router-dom": "^6.2.1"
  },
  "devDependencies": {
    "@babel/core": "^7.16.0",
    "@babel/plugin-transform-runtime": "^7.16.5",
    "@babel/preset-env": "^7.16.11",
    "@babel/preset-react": "^7.16.7",
    "babel-loader": "^8.2.3",
    "css-loader": "^6.5.1",
    "file-loader": "^6.2.0",
    "html-webpack-plugin": "^5.5.0",
    "isomorphic-style-loader": "^5.3.2",
    "mini-css-extract-plugin": "^2.5.3",
    "style-loader": "^3.3.1",
    "webpack": "^5.65.0",
    "webpack-cli": "^4.9.1",
    "webpack-dev-server": "^4.6.0"
  },
  "scripts": {
    "start": "webpack-dev-server --open",
    "build": "webpack",
    "ssr": "node server/index.js"
  }
}

Answer 1

试试这个，我更新了你的快速配置代码

const path = require("path");

const fs = require("fs");

const express = require("express");

const React = require("react");

const ReactDOMServer = require("react-dom/server");

const router = express.Router();

import { StaticRouter } from "react-router-dom/server";

import Rout from "../src/Menu/router";

const app = express();

const PORT = 9001;

const serverrender = (req, res, next) => {
  const aa = ReactDOMServer.renderToString(
    <StaticRouter location={req.url}>
      <Rout />
    </StaticRouter>
  );
  fs.readFile(path.resolve("./assets/index.html"), "utf-8", (err, data) => {
    if (err) {
      console.log(err);
    }
    return res.send(data.replace('<div id="root"></div>', `<div id="root">${aa}</div>`));
  });
};

// router.use(express.static(path.resolve(__dirname, '..', '/assets/static')))
// router.use('/', serverrender)

// root (/) should always serve our server rendered page
router.use("^/$", serverrender);

// other static resources should just be served as they are
router.use(
  express.static(path.resolve(__dirname, "..", "/assets/static"), {
    maxAge: "30d",
  })
);

// any other route should be handled by react-router, so serve the index page
router.use("*", serverrender);

app.use(router);
app.listen(PORT, () => {
  console.log(`${PORT}`);
});