React Router с express

Question

Привет я пытаюсь служить реагировать с express.

Вот мой рабочий процесс

1. Create React page with CRA
2. build react files with "react-scripts build" script
3. serve build files with express

Это мой индекс. js файл, который запускает express server

// index.js
const express = require("express");
const path = require("path");

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

app.use(express.static(path.join(__dirname, "build")));

app.get("/", (req, res) => {
  return res.send("Hi"); // It's meaningless since index.html file will be served.
});

app.listen(PORT, () => {
  console.log(`? Server is listening on port ${PORT}`);
});

Работает хорошо, как и ожидалось. Однако, когда дело доходит до React-router, возникает проблема.

Поскольку я создал маршрутизатор только для '/', возникает ошибка при непосредственном доступе к определенному маршрутизатору.

Это мой файл App.jsx, который включает маршрутизатор

// App.jsx
import React from "react";
import { Route, Link } from "react-router-dom";
import About from "./About";
import Home from "./Home";

const App = () => {
  return (
    <div>
      <div>
        <Link to="/">Home</Link>
        <Link to="/about">About</Link>
      </div>
      <Route path="/" exact={true} component={Home} />
      <Route path="/about" component={About} />
    </div>
  );
};

export default App;

Применение SSR, как показано ниже, может быть одним из ответов. Хотя это не решает проблему принципиально.

// index.js
...
ReactDOMServer.renderToString(
    <StaticRouter location={req.url} context={context}>
      <App />
    </StaticRouter>
  );
...

Как я могу справиться с этой проблемой, используя только CSR?

---

+

Я проверил, как работает реагирующая страница. ( который подается с react-script start) Я поместил {window ? "client" : "server"} в App.jsx и проверил результат при непосредственном доступе к / home. Результатом стал «клиент».