服务器端使用反应引导程序渲染反应应用程序不起作用

Question

我是 ssr 的新手，我正在尝试使用 renderToString() 在服务器端渲染我的 react 应用程序，但由于我使用的是 react bootstrap，因此在尝试渲染它时应用程序总是崩溃。 然而，如果我从组件中删除所有组件并用简单的 div <div>Hello World!</div>替换它们，那么 ssr 可以完美运行，如果有人能提供帮助，我将不胜感激，我一直在这持续了2个多星期。 谢谢你。 以下是我的代码和错误代码：

应用程序.jsx：

import React from "react";
import Navigation from "./components/Navigation";
export default function App(props) {

  return (
    <div>
      <Navigation />
    </div>
    //I deleted the routes for a simpler to read code, since with or without routes I get the same 
      error//
  );
}

导航.js：

import React from "react";
import { Nav, Navbar, Container } from "react-bootstrap";
import { Link } from "react-router-dom";
export default function Navigation() {
  return (
    <div>
      <Navbar
        collapseOnSelect
        fixed="top"
        className="topNavbar"
        expand="md"
        bg="dark"
        variant="dark"
      >
        <Container>
          <div className="logo">
            <Nav.Link className="SCMP1" eventKey="0" as={Link} to="/">
              test
            </Nav.Link>
          </div>

          <Navbar.Toggle aria-controls="responsive-navbar-nav" />
          <Navbar.Collapse id="responsive-navbar-nav">
            <Nav className="me-auto"></Nav>
            <Nav>        
              <Nav.Link className={"navlink"} eventKey="1" as={Link} to="/">
                Home
              </Nav.Link>

              <Nav.Link
                className={"navlink"}
                eventKey="2"
                as={Link}
                to="/Departments"
              >
                Departments
              </Nav.Link>
              <Nav.Link
                className={"navlink"}
                eventKey="3"
                as={Link}
                to="/Events"
              >
                Events
              </Nav.Link>
              <Nav.Link className={"navlink"} eventKey="4" as={Link} to="/Auth">
                LogIn
              </Nav.Link>
            </Nav>
          </Navbar.Collapse>
        </Container>
      </Navbar>
    </div>
  );
}

快递 SSR 代码：

app.get("/",(req,res,next)=>{
  const app = ReactDOMServer.renderToString(<App />);
const index= path.resolve('../client/build/index.html')
console.log(index)
fs.readFile(index, '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>`)
  );
});
});

错误代码：

Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app
See https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem.
    at resolveDispatcher (G:\website2-1\SCMP WebDev\client\node_modules\react\cjs\react.development.js:1476:13)
    at useRef (G:\website2-1\SCMP WebDev\client\node_modules\react\cjs\react.development.js:1515:20)
    at useUncontrolledProp (G:\website2-1\SCMP WebDev\client\node_modules\uncontrollable\lib\cjs\hook.js:24:38)
    at G:\website2-1\SCMP WebDev\client\node_modules\uncontrollable\lib\cjs\hook.js:63:32
    at Array.reduce (<anonymous>)
    at useUncontrolled (G:\website2-1\SCMP WebDev\client\node_modules\uncontrollable\lib\cjs\hook.js:53:30)
    at Object.render (G:\website2-1\SCMP WebDev\client\node_modules\react-bootstrap\cjs\Navbar.js:60:43)
    at ReactDOMServerRenderer.render (G:\website2-1\SCMP WebDev\server\node_modules\react-dom\cjs\react-dom-server.node.development.js:3872:44)
    at ReactDOMServerRenderer.read (G:\website2-1\SCMP WebDev\server\node_modules\react-dom\cjs\react-dom-server.node.development.js:3690:29)
    at Object.renderToString (G:\website2-1\SCMP WebDev\server\node_modules\react-dom\cjs\react-dom-server.node.development.js:4298:27)

感谢您的帮助