React 服务器端只渲染特定的路由

Question

I currently have a website built using EJS and using express on the backend on port 3300 . The structure of the routes look like this:

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

I am currently returning EJS files in the routes like this:

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

But now, I want to add a new route in the structure that uses React such that the following will be built using React:

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

From my understanding, if I want to use React, I would have to re-write all my previous routes (that returns EJS) as React components since you can't merge the two servers (React and Express as they both run on different ports: 3000 and 3300 respectively). But since I have so much written already I tried to render the new routes on the serverside by following this tutorial resulting in:

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

And App.js looking like:

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

I get an error: Error: Invariant failed: Browser history needs a DOM at invariant

How do I fix the error? Or is there a better way to combine both EJS routes and create new React routes? Thanks in advance

Answer 1

Issue

You need to use a different Router in the server as well. Since BrowserRouter in the client React app cannot be processed in the server.

Static Router is what you're looking for.

Solution

Server-side rendering in React is very tricky. I recommend you to use Nextjs which makes it easy.

For side-projects , refer to this blog