React SSR 错误 - 元素类型无效：预期为字符串（用于内置组件）或类/函数（用于复合组件）但得到：对象

Question

我的应用有一个简单的 ssr 路由，下面是我的代码

index.tsx

import React from "react";
import ReactDOM from "react-dom";
import "./index.css";
import App from "./App";
import * as serviceWorker from "./serviceWorker";
import "bootstrap/dist/css/bootstrap.min.css";

ReactDOM.hydrate(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById("root")
);
serviceWorker.unregister();

App.tsx

import React from "react";
import {
  BrowserRouter as Router,
  Switch,
  Route,
  Redirect,
} from "react-router-dom";
import Home from "./components/home/Home";
import Tournament from "./components/tournament/Tournament";
import "./App.css";

function App() {
  return (
    <div className="App">
      <Router>
        <Switch>
          <Route path="/" exact strict component={Home} />
          <Route
            path="/tournament/:tourId/:tourName"
            exact
            component={Tournament}
          />
          <Redirect from="*" to={"/"} />
        </Switch>
      </Router>
    </div>
  );
}

export default App;

服务器/server.js

import path from "path";
import fs from "fs";

import express from "express";
import React from "react";
import ReactDOMServer from "react-dom/server";

import App from "../src/App";

const PORT = 8000;
const app = express();

const router = express.Router();

app.get("/*", (req, res) => {
  const context = {};
  const app = ReactDOMServer.renderToString(
    <App />
  );

  const indexFile = path.resolve("./build/index.html");
  fs.readFile(indexFile, "utf8", (err, data) => {
    if (err) {
      console.error("Something went wrong:", err);
      return res.status(500).send("Oops, better luck next time!");
    }

    return res.send(
      data.replace('<div id="root"></div>', `<div id="root">${app}</div>`)
    );
  });
});

router.use(
  express.static(path.resolve(__dirname, "..", "build"), { maxAge: "30d" })
);

// tell the app to use the above rules
app.use(router);

app.use(express.static("./build"));
app.listen(PORT, () => {
  console.log(`SSR running on port ${PORT}`);
});

服务器/index.js

require("ignore-styles");

require("@babel/register")({
  ignore: [/(node_modules)/],
  presets: ["@babel/preset-env", "@babel/preset-react"],
});

require("./server");

当我运行 node server/index.js 时，它会启动服务器，这很好。但是当我在浏览器上启动 http://localhost:8000/ 时，它给了我以下错误

警告：React.createElement: type is invalid -- 期望一个字符串（对于内置组件）或一个类/函数（对于复合组件）但得到：对象。您可能忘记从定义组件的文件中导出组件，或者您可能混淆了默认导入和命名导入。

错误：元素类型无效：应为字符串（对于内置组件）或类/函数（对于复合组件），但得到：对象。您可能忘记从定义组件的文件中导出组件，或者您可能混淆了默认导入和命名导入。 在 ReactDOMServerRenderer.render ...

PS：我是 reactjs 新手

Answer 1

ReactDOMServer.renderToString(
    <App />
  );

如果您查看“react-dom/server”文档，您可以使用不同的方法。有时“.renderToString”在服务器上不起作用，所以使用另一个像：

.renderToStaticMarkup()
.renderToNodeStream()
.renderToStaticNodeStream()