Javascript React服务器端仅呈现特定路由

我目前有一个网站是使用EJS和express在端口

3300的后端构建的。路线的结构如下所示：

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

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});        
        }
    });
});

我目前正在返回以下路径中的EJS文件：

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

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，我必须将我以前的所有路由（返回EJB）重新写入React组件，因为您无法合并这两台服务器（React和Express，因为它们都运行在不同的端口上：
3000
和
3300
）。但是，由于我已经写了很多东西，我尝试在服务器端呈现新路由，结果如下：

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

router.get（“/documental”，（请求、回复）=>{
documental.find（{}）.exec（函数（err，foundDoc）{
如果（错误）{
控制台日志（err）；
}否则{
fs.readFile（path.resolve（“./views/react/client/build/index.html”），“utf-8”，（err，data）=>{
如果（错误）{
返回资源状态（500）。发送（“错误”）；
}
返回res.send(
data.replace(
'',
`${ReactDOMServer.renderToString（）}`
)
);
});
}
})
});

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>
      );
    }

函数应用程序（）{
返回(
纪录片分级页面
纪录片评论页
);
}

我得到一个错误：
错误：不变式失败：浏览器历史记录需要一个位于不变式的DOM

如何修复错误？或者有没有更好的方法来组合两个EJS路由并创建新的React路由？提前感谢
问题
您还需要在服务器中使用不同的
路由器。
由于客户端中的
BrowserRouter
，因此无法在服务器中处理React应用程序

这就是你要找的

解决方案
React
中的服务器端渲染非常棘手。我建议你使用它，这样做很容易

对于
侧项目
，
如果我决定使用Nextjs，我可以轻松地将其集成到我的服务器的当前结构中吗？这需要一些时间，但这将节省很多麻烦。在使用
react
在生产应用程序中设置了我自己的服务器之后，我不建议任何人在没有Nextjs的情况下进行
服务器端
渲染，除非你完全知道你在做什么。如果我决定使用Nextjs，我还能使用我的EJS前端吗？不过我不知道这一点。你应该参考Nextjs的文档。