SyntaxError: неожиданный токен '<' при рендеринге приложения реагирования на стороне сервера с использованием статического маршрутизатора

Я пытаюсь выполнить рендеринг личного проекта на стороне сервера, используя статический маршрутизатор и экспресс. Я следую официальной документации реагирующего маршрутизатора. Когда я пытаюсь запустить сервер, он показывает следующую ошибку

          <StaticRouter location={req.url}>
    ^

SyntaxError: Unexpected token '<'
    at ModuleLoader.moduleStrategy (node:internal/modules/esm/translators:118:18)
    at callTranslator (node:internal/modules/esm/loader:273:14)
    at ModuleLoader.moduleProvider (node:internal/modules/esm/loader:278:30)
    at async link (node:internal/modules/esm/module_job:76:21)

вот мой код index.js

      import React from "react";
import ReactDOM from "react-dom/client";
import { BrowserRouter } from "react-router-dom";
import App from "./App";
import "./index.css";
import "bootstrap/dist/css/bootstrap.min.css";
import reportWebVitals from "./reportWebVitals";

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  <BrowserRouter>
    <App />
  </BrowserRouter>
);

app.jsx

      import "./App.css";
import { Routes, Route } from "react-router-dom";
import Navi from "./components/Nav";
import Homepage from "./components/home";
import SignIn from "./components/signin";
import SignUp from "./components/signup";
import ErrorPage from "./components/error";

function App() {
  return (
    <html>
      <title>Meetings App</title>
      <body>
        <div id="app">
          <Routes>
            <Route path="/" element={<Navi />}>
              <Route index element={<Homepage />}></Route>
              <Route path="/signup" element={<SignUp />}></Route>
              <Route path="/signin" element={<SignIn />}></Route>
            </Route>
            <Route path="*" element={<ErrorPage />}></Route>
          </Routes>
        </div>
        <script src="./index.js" />
      </body>
    </html>
  );
}

export default App;

сервер.jsx

      import express from "express";
import ReactDOMServer from "react-dom/server";
import { StaticRouter } from "react-router-dom/server";
import App from "../src/App";
const http = require("http");

const app = express();
const server = http.createServer(app);

app.get("/", (req, res) => {
  let html = ReactDOMServer.renderToString(
    <StaticRouter location={req.url}>
      <App />
    </StaticRouter>
  );

  res.send("<!DOCTYPE html>" + html);
});

let PORT = process.env.PORT || 5000;
server.listen(PORT, () => {
  console.log(`server running on port ${PORT}`);
});

Судя по тому, что я исследовал в Google, я думаю, что проблема в том, что сервер пытается отобразить файл JS, но я предоставляю HTML, хотя мне не удалось решить проблему. Может ли кто-нибудь помочь мне с этим?

Источник

0 ответов

Другие вопросы по тегам