如何使用React Router4实现服务端渲染ssr

这篇文章将为大家详细讲解有关如何使用React Router4实现服务端渲染ssr，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。

我们已经熟悉React 服务端渲染（SSR）的基本步骤，现在让我们更进一步利用 React RouterV4 实现客户端和服务端的同构。毕竟大多数的应用都需要用到web前端路由器，所以要让SSR能够正常的运行，了解路由器的设置是十分有必要的

基本步骤

路由器配置

前言已经简单的介绍了React SSR，首先我们需要添加ReactRouter4到我们的项目中

$ yarn add react-router-dom

# or, using npm
$ npm install react-router-dom

接着我们会描述一个简单的场景，其中组件是静态的且不需要去获取外部数据。我们会在这个基础之上去了解如何完成取到数据的服务端渲染。

在客户端，我们只需像以前一样将我们的的App组件通过ReactRouter的BrowserRouter来包起来。

src/index.js

import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter } from 'react-router-dom';

import App from './App';

ReactDOM.hydrate(
 <BrowserRouter>
  <App />
 </BrowserRouter>,
 document.getElementById('root')
);

在服务端我们将采取类似的方式，但是改为使用无状态的 StaticRouter

server/index.js

app.get('}

   <Switch>
    {renderRoutes(Routes)}
   </Switch>
  </div>
 );
};

注

• SSR服务端React组件的生命周期不会运行到componentDidMount,componentDidMount只有在客户端才会运行。

• React16不再推荐使用componentWillMount方法，应使用constructor来代替。

• staticContext的实现应该跟redux的高阶组件connect类似，也是通过包装一层react控件来实现子组件的属性传递。

• 文章只是对SSR做了一个入门的介绍，如Loadable和样式的处理在文章中没有介绍，但这两点对于SSR来说很重要

关于“如何使用React Router4实现服务端渲染ssr”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，使各位可以学到更多知识，如果觉得文章不错，请把它分享出去让更多的人看到。