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

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

创新互联是一家专业提供陵川企业网站建设,专注与成都网站设计、做网站、成都外贸网站建设公司、H5开发、小程序制作等业务。10年已为陵川众多企业、政府机构等服务。创新互联专业的建站公司优惠进行中。

我们已经熟悉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(
 
  
 ,
 document.getElementById('root')
);

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

server/index.js

app.get('/*', (req, res) => {
 const context = {};
 const app = ReactDOMServer.renderToString(
  
   
  
 );

 const indexFile = path.resolve('./build/index.html');
 fs.readFile(indexFile, 'utf8', (err, data) => {
  if (err) {
   console.error('Something went wrong:', err);
   return res.status(500).send('Oops, better luck next time!');
  }

  return res.send(
   data.replace('

', `${app}

`) ); }); }); app.listen(PORT, () => { console.log(`? Server is listening on port ${PORT}`); });

StaticRouter组件需要 location和context属性。我们传递当前的url（Express req.url）给location，设置一个空对象给context。context对象用于存储特定的路由信息，这个信息将会以staticContext的形式传递给组件

运行一下程序看看结果是否我们所预期的，我们给App组件添加一些路由信息

src/App.js

import React from 'react';
import { Route, Switch, NavLink } from 'react-router-dom';
import Home from './Home';
import Posts from './Posts';
import Todos from './Todos';
import NotFound from './NotFound';

export default props => {
 return (
  
   
    
     Home
    
    
     Todos
    
    
     Posts
    
   

   
     }
    />
    
    
    
   
  
 );
};

现在如果你运行一下程序($ yarn run dev)，我们的路由在服务端被渲染，这是我们所预期的。

利用404状态来处理未找到资源的网络请求

我们做一些改进，当渲染NotFound组件时让服务端使用404HTTP状态码来响应。首先我们将一些信息放到NotFound组件的staticContext

import React from 'react';

export default ({ staticContext = {} }) => {
 staticContext.status = 404;
 return Oops, nothing here!;
};

然后在服务端，我们可以检查context对象的status属性是否是404，如果是404，则以404状态响应服务端请求。

server/index.js

// ...

app.get('/*', (req, res) => {
 const context = {};
 const app = ReactDOMServer.renderToString(
  
   
  
 );

 const indexFile = path.resolve('./build/index.html');
 fs.readFile(indexFile, 'utf8', (err, data) => {
  if (err) {
   console.error('Something went wrong:', err);
   return res.status(500).send('Oops, better luck next time!');
  }

  if (context.status === 404) {
   res.status(404);
  }

  return res.send(
   data.replace('

import App from './App'; import Home from './Home'; import Posts from './Posts'; import Todos from './Todos'; import NotFound from './NotFound'; import loadData from './helpers/loadData'; const Routes = [ { path: '/', exact: true, component: Home }, { path: '/posts', component: Posts, loadData: () => loadData('posts') }, { path: '/todos', component: Todos, loadData: () => loadData('todos') }, { component: NotFound } ]; export default Routes;

import 'isomorphic-fetch'; export default resourceType => { return fetch(`https://jsonplaceholder.typicode.com/${resourceType}`) .then(res => { return res.json(); }) .then(data => { // only keep 10 first results return data.filter((_, idx) => idx < 10); }); };

import React from 'react'; import express from 'express'; import ReactDOMServer from 'react-dom/server'; import path from 'path'; import fs from 'fs'; import serialize from 'serialize-javascript'; import { StaticRouter, matchPath } from 'react-router-dom'; import Routes from '../src/routes'; import App from '../src/App'; const PORT = process.env.PORT || 3006; const app = express(); app.use(express.static('./build')); app.get('/*', (req, res) => { const currentRoute = Routes.find(route => matchPath(req.url, route)) || {}; let promise; if (currentRoute.loadData) { promise = currentRoute.loadData(); } else { promise = Promise.resolve(null); } promise.then(data => { // Lets add the data to the context const context = { data }; const app = ReactDOMServer.renderToString( ); const indexFile = path.resolve('./build/index.html'); fs.readFile(indexFile, 'utf8', (err, indexData) => { if (err) { console.error('Something went wrong:', err); return res.status(500).send('Oops, better luck next time!'); } if (context.status === 404) { res.status(404); } if (context.url) { return res.redirect(301, context.url); } return res.send( indexData .replace('', `${app}`) .replace( '', `` ) ); }); }); }); app.listen(PORT, () => { console.log(`? Server is listening on port ${PORT}`); });

import React from 'react'; import loadData from './helpers/loadData'; class Todos extends React.Component { constructor(props) { super(props); if (props.staticContext && props.staticContext.data) { this.state = { data: props.staticContext.data }; } else { this.state = { data: [] }; } } componentDidMount() { setTimeout(() => { if (window.__ROUTE_DATA__) { this.setState({ data: window.__ROUTE_DATA__ }); delete window.__ROUTE_DATA__; } else { loadData('todos').then(data => { this.setState({ data }); }); } }, 0); } render() { const { data } = this.state; return

{todo.title})}

; } } export default Todos;

import { matchRoutes } from 'react-router-config'; // ... const matchingRoutes = matchRoutes(Routes, req.url); let promises = []; matchingRoutes.forEach(route => { if (route.loadData) { promises.push(route.loadData()); } }); Promise.all(promises).then(dataArr => { // render our app, do something with dataArr, send response }); // ...

import React from 'react'; import { renderRoutes } from 'react-router-config'; import { Switch, NavLink } from 'react-router-dom'; import Routes from './routes'; import Home from './Home'; import Posts from './Posts'; import Todos from './Todos'; import NotFound from './NotFound'; export default props => { return (

{/* ... */} {renderRoutes(Routes)}

); };

重庆分公司，新征程启航

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

Oops, nothing here!

其他资讯