利用React Router4实现的服务端直出渲染(SSR)
我们已经熟悉React服务端渲染(SSR)的基本步骤,现在让我们更进一步利用ReactRouterV4实现客户端和服务端的同构。毕竟大多数的应用都需要用到web前端路由器,所以要让SSR能够正常的运行,了解路由器的设置是十分有必要的
基本步骤
路由器配置
前言已经简单的介绍了ReactSSR,首先我们需要添加ReactRouter4到我们的项目中
$yarnaddreact-router-dom #or,usingnpm $npminstallreact-router-dom
接着我们会描述一个简单的场景,其中组件是静态的且不需要去获取外部数据。我们会在这个基础之上去了解如何完成取到数据的服务端渲染。
在客户端,我们只需像以前一样将我们的的App组件通过ReactRouter的BrowserRouter来包起来。
src/index.js
importReactfrom'react';
importReactDOMfrom'react-dom';
import{BrowserRouter}from'react-router-dom';
importAppfrom'./App';
ReactDOM.hydrate(
,
document.getElementById('root')
);
在服务端我们将采取类似的方式,但是改为使用无状态的StaticRouter
server/index.js
app.get('/*',(req,res)=>{
constcontext={};
constapp=ReactDOMServer.renderToString(
);
constindexFile=path.resolve('./build/index.html');
fs.readFile(indexFile,'utf8',(err,data)=>{
if(err){
console.error('Somethingwentwrong:',err);
returnres.status(500).send('Oops,betterlucknexttime!');
}
returnres.send(
data.replace('