React 服务器端只渲染特定的路由
React server side rendering only specific routes
我目前有一个使用 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,我将不得不重写我以前的所有路由(returns 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 路由?提前致谢
问题
您还需要在服务器中使用不同的 Router
。
由于 BrowserRouter
在客户端 React 应用程序无法在服务器中处理。
Static Router 就是您要找的。
解决方案
Server-side 在 React
中渲染非常棘手。我建议您使用 Nextjs,这很容易。
对于side-projects
、refer to this blog
我目前有一个使用 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,我将不得不重写我以前的所有路由(returns 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 路由?提前致谢
问题
您还需要在服务器中使用不同的 Router
。
由于 BrowserRouter
在客户端 React 应用程序无法在服务器中处理。
Static Router 就是您要找的。
解决方案
Server-side 在 React
中渲染非常棘手。我建议您使用 Nextjs,这很容易。
对于side-projects
、refer to this blog