React/Node 应用程序中服务器端渲染的外部路由问题|软件开发问答库

我有一个非常奇怪的问题，如果我在客户端渲染的情况下运行我的应用程序，那么所有路由都可以完美运行。但是，当我切换到 SSR 时，它最初在 http://localhost:8001 上运行良好但是当我通过在浏览器搜索栏中按 Enter 加载新的 get 请求以加载不同的路由时，例如 http://localhost:8001/covid 然后我得到这个错误... 这是用 create-react-app 生成的

<块引用>

TypeError [ERR_INVALID_CALLBACK]：回调必须是一个函数。收到未定义在maybeCallback (fs.js:160:9) 在 Object.readFile (fs.js:311:14) 在 D:\Repo\WhiteTigerCreateReactApp\server/server.js:37:8 在 Layer.handle [as handle_request] (D:\Repo\WhiteTigerCreateReactApp\node_modules\express\lib\router\layer.js:95:5) 接下来 (D:\Repo\WhiteTigerCreateReactApp\node_modules\express\lib\router\route.js:137:13) 在 Route.dispatch (D:\Repo\WhiteTigerCreateReactApp\node_modules\express\lib\router\route.js:112:3) 在 Layer.handle [as handle_request] (D:\Repo\WhiteTigerCreateReactApp\node_modules\express\lib\router\layer.js:95:5) 在 D:\Repo\WhiteTigerCreateReactApp\node_modules\express\lib\router\index.js:281:22 在参数 (D:\Repo\WhiteTigerCreateReactApp\node_modules\express\lib\router\index.js:354:14) 在参数 (D:\Repo\WhiteTigerCreateReactApp\node_modules\express\lib\router\index.js:365:14)

这是我加载 react 应用程序的 nodeJS 文件，我已经注释掉了用于客户端渲染的行

import express from 'express';
import fs from 'fs';
import path from 'path';
import React from 'react';
import ReactDomServer from 'react-dom/server'

import App from '../src/components/App'
const PORT = 8001;

const app = express();

let indexPath = path.join(__dirname, '../build/index.html');
let buildPath = path.join(__dirname, '../build');

app.use(express.static(path.resolve(__dirname, '..', 'build')));

app.get('*', function (req, res) {
    
    console.log("response",indexPath);

    //SSR -------------------------
    fs.readFile(indexPath), 'utf-8', (err, data) => {
        if (err) {
            console.log('error from server.js', err);
            return res.status(500).send("Some error happened")
        }
        return res.send(data.replace(
            "<div id='root'></div>",
            `<div id="root">${ReactDomServer.renderToString(<App />)} </div>`));
    }
    //Client Render -----------------
    //res.sendFile(indexPath);   

});

app.listen(PORT, () => {
    console.log(`App launced on ${PORT}`);
});

这是一个单独的服务器文件，我正在调用它。这会调用上面的代码。

require('ignore-styles')

require('@babel/register')({
    ignore: [/(node_module)/],
    presets: ['@babel/preset-env', '@babel/preset-react']
})

require('./server')

我的 react 应用有这个入口点

import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter as Router } from "react-router-dom";

/* ./ means search local file system*/
import './assets/css/styles.css';
import './assets/css/utility.css';
import './assets/css/animate.min.css';
import './assets/css/call-now.css';
import './assets/css/Contact-Form-Clean.css';
import './assets/css/betternav.min.css';
import App from './components/App';
//when importing from a module the file extension is omitted. */
import '../node_modules/font-awesome/css/font-awesome.min.css';
import '../node_modules/bootstrap/dist/css/bootstrap.min.css';
import '../node_modules/bootstrap/dist/js/bootstrap.min.js';
import reportWebVitals from './reportWebVitals';

ReactDOM.hydrate(
  <React.StrictMode>
    <Router>
    <App />
    </Router>
  </React.StrictMode>,
  document.getElementById('root')
);    

reportWebVitals();

我的 App 组件看起来像这样，它包含所有路由......显然在 SSR 期间有什么东西没有工作或加载？：/

import { React, Component } from 'react';
import { Switch, Route } from 'react-router-dom'
import '../assets/css/header.css';
import '../assets/css/footer.css';
import Header from './header';
import Footer from './footer';
import Body from './body';
import ClientPage from './clientPage'
import CovidPage from './covidPage'
import Commercial from './commercialPage'
import CarpetFloorPage from './carpetFloor'
import IndustrialConstructionPage from './industrialConstructionPage';
import SafeContractorPage from './safeContractor';
import ContactPage from './contactPage';
import IndustrialCommercialPage from './industrialCommercialPage';
import Popper from 'popper.js';
import BetterNav from '../utility/betternav'
import PageNotFound from './notFoundPage';

class App extends Component { 


  componentDidMount()
  {
    BetterNav();
  }

  render() {
    return (
      <div>
        <Header></Header>
        <Switch>          
          <Route exact path='/' component={Body} />          
          <Route path='/clients' component={ClientPage} />
          <Route path='/covid' component={CovidPage} />
          <Route path='/commercial' component={Commercial} />       
          <Route path='/carpet-floor' component={CarpetFloorPage} /> 
          <Route path='/industrial-construction' component={IndustrialConstructionPage} /> 
          <Route path='/safe-contractor' component={SafeContractorPage} />          
          <Route path='/contact' component={ContactPage} />
          <Route path='/industrial-commercial' component={IndustrialCommercialPage} />                     
          <Route component={PageNotFound} />
        </Switch>
        <Footer></Footer>
      </div>
    );
  }
  
}

export default App;

自从将 server.js 中的代码更新为

app.get('*', function (req, res) {
    
    console.log("response",indexPath);

    //SSR -------------------------
    fs.readFile(indexPath, 'utf-8', (err, data) => {
        if (err) {
            console.log('error from server.js', err);
            return res.status(500).send("Some error happened")
        }
        return res.send(data.replace(
            "<div id='root'></div>",
            `<div id="root">${ReactDomServer.renderToString(<App />)} </div>`));
    })
    //Client Render -----------------
    //res.sendFile(indexPath);   

});

应用程序首先加载 http://localhost:8001 照常没问题。但是当我去 http://localhost:8001/covid 我收到了这个错误..

<块引用>

D:\Repo\WhiteTigerCreateReactApp\node_modules\react-dom\cjs\react-dom-server.node.development.js:3709 抛出错误； ^

TypeError: 无法读取未定义的属性“createElement” 在 App.render (D:\Repo\WhiteTigerCreateReactApp\src\components/App.js:30:7) 在 processChild (D:\Repo\WhiteTigerCreateReactApp\node_modules\react-dom\cjs\react-dom-server.node.development.js:3450:18) 在解析 (D:\Repo\WhiteTigerCreateReactApp\node_modules\react-dom\cjs\react-dom-server.node.development.js:3270:5) 在 ReactDOMServerRenderer.render (D:\Repo\WhiteTigerCreateReactApp\node_modules\react-dom\cjs\react-dom-server.node.development.js:3753:22) 在 ReactDOMServerRenderer.read (D:\Repo\WhiteTigerCreateReactApp\node_modules\react-dom\cjs\react-dom-server.node.development.js:3690:29) 在 Object.renderToString (D:\Repo\WhiteTigerCreateReactApp\node_modules\react-dom\cjs\react-dom-server.node.development.js:4298:27) 在 D:\Repo\WhiteTigerCreateReactApp\server/server.js:27:46 在 FSReqCallback.readFileAfterClose [as oncomplete] (internal/fs/read_file_context.js:63:3) npm ERR！代码生命周期 npm 呃！错误号 1 npm 错误号！ ssr-example@0.1.0 ssr：node server/index.js npm 错误！退出状态 1 npm ERR！ npm 错误！失败于 ssr-example@0.1.0 ssr 脚本。