Question

我目前拥有一个使用EJS并在端口3300的后端上使用express的网站。路线的结构如下：

localhost:3300
-/movies
   -/rating
   -/review
-/tvshows
   -/rating
   -/review

我目前正在通过以下路线返回EJS文件：

router.get("/:title/rating", function(req, res) {
    Movie.find({ movieName: req.params.title })
    .exec(function(err, foundMovie) {
        if (err) {
            console.log(err);
        } else {
            console.log(foundMovie)
            res.render("movie/rating", { movie: foundMovie});        
        }
    });
});

但是现在，我想在使用React的结构中添加一条新路由，以便使用React构建以下内容：

localhost:3300
-/documentary
    -/rating
    -/review

据我了解，如果我想使用React，我将不得不将所有以前的路由（返回EJS）重新编写为React组件，因为您无法合并两个服务器（React和Express都在运行）在不同的端口上：分别为3000和3300）。但是由于已经写了很多文章，所以我尝试按照以下tutorial在服务器端呈现新路由，结果是：

router.get("/documentary", (req,res) => {
    Documentary.find({}).exec(function(err,foundDoc){
        if (err){
            console.log(err);
        } else {
            fs.readFile(path.resolve("./views/react/client/build/index.html"), "utf-8", (err, data) => {
                if (err) {
                  return res.status(500).send("Error");
                }
                return res.send(
                  data.replace(
                    '<div id="root"></div>',
                    `<div id="root">${ReactDOMServer.renderToString(<App />)}</div>`
                  )
                );
              });
        }
    })
});

App.js如下：

function App() {
  return (
    <BrowserRouter>
      <Switch>
        <Route exact path="/rating">
          <h1>Rating page for Documentaries</h1>
        </Route>  
        <Route exact path="/review">
          <h1>Review page for Documentaries</h1>
        </Route>
      </Switch>
    </BrowserRouter>
      );
    }

我得到一个错误： Error: Invariant failed: Browser history needs a DOM at invariant

如何解决该错误？还是有一种更好的方法来合并两个EJS路由并创建新的React路由？预先感谢

Answer 1

问题

您还需要在服务器中使用其他Router。由于客户端React应用中的BrowserRouter无法在服务器中处理。

Static Router是您要寻找的。

解决方案

React中的服务器端渲染非常棘手。我建议您使用Nextjs，这很容易。

对于side-projects，refer to this blog

React服务器端仅渲染特定路由

1 个答案:

问题

解决方案