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

Question

我的应用使用ssr进行了简单的路由，下面是我的代码

index.tsx

Request

App.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();

server / server.js

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 / index.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}`);
});

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

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

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

PS：我是ReactJS的新手