如何使用 react-router-v4 做 server side render

最新推荐文章于 2024-09-14 18:52:56 发布
最新推荐文章于 2024-09-14 18:52:56 发布
阅读量147 收藏
点赞数
文章标签： javascript ViewUI
原文链接：https://juejin.im/post/5a926c806fb9a063317c706e
版权

前言

本文旨在帮助读者在react router v4下搭建自己的满足seo需求的server side render app。

react

不多说了，近年来发展迅猛，被各大主流应用广泛使用；

react-router-v4

react路由做了一次较大的改动，如果你的app是16年或者更早搭建的话，相信路由还是v3版本，不过没有关系，你可以参照本文尝试现在就升级你的router，v4会给你带来更多的灵活性。

与v3相比，v4主要有以下更改：

  • 声明式路由；
  • 无需集中配置，分布式路由；
  • 路由支持正则匹配；匹配规则
  • 对于web app和react native app来说，是独立的包；
  • 取消了原本的onEnter 和 onChange回调函数，你需要使用component的生命周期函数来实现同样的功能；

本文假设你已经熟悉react，redux和express，并且构建过自己的app；

搭建

1. 安装React Router v4；

npm i --save react-router-dom react-router-config
复制代码

或用yarn，react-router-config是web的router，它进一步封装了react-router, (native app的安装包是react-router-native), 并且保留了一些react-router的接口，所以如果你对系统已经装了react-router，建议删除，直接用react-router-config就好。

2. 配置路由；

如果你在用v3，那么你可能有这样一个集中式的路由文件：

import React from 'react';
import { Route } from 'react-router';

const Routes = () => (
  <Route path="/" onEnter={() => {}} onChange={() => {}}>
    <Route path=":channel/abc" component={MyContainer1} />
    <Route path=":channel/def" component={MyContainer2} />
    <Route path=":channel/*" component={NotFoundContainer} status={404} />
  </Route>
);

export default Routes;
复制代码

v4是截然不同的做法，首先，定义一个你的路由配置：

# routes.js
import RootApp from './RootApp';
import Home from './Home';
import List from './List';

const routes = [
  { component: RootApp,
    routes: [ # 多级嵌套
      { path: '/',
        exact: true,
        component: Home
      },
      { path: '/home',
        component: Home
      },
      { path: '/list',
        component: List
      }
    ]
  }
];

export default routes;
复制代码

在你的client端，使用<BrowserRouter>render你的routes, 你的client.js长成这个样子：

# client.js
import React from 'react';
import {render} from 'react-dom';
import BrowserRouter from 'react-router-dom/BrowserRouter';
import { renderRoutes } from 'react-router-config';
import { createStore, applyMiddleware } from 'redux';
import { Provider } from 'react-redux';
import thunk from 'redux-thunk';
import routes from './routes'; # 上文定义的routes配置；
import reducers from './modules';

const store = createStore(
  reducers, window.__INITIAL_STATE__, applyMiddleware(thunk) 
);

const AppRouter = () => {
  return (
    <Provider store={store}>
      <BrowserRouter>  # 使用v4的BrowserRouter；
        {renderRoutes(routes)} # 使用v4的renderRoutes；
      </BrowserRouter>
    </Provider>
  )
}

render(<AppRouter />, document.querySelector('#app'));
复制代码

在你的server端，使用<StaticRouter>，eg. server.js:

# server.js
import express from 'express';
import request from 'request';
import React from 'react';
import { renderToString } from 'react-dom/server';
import StaticRouter from 'react-router-dom/StaticRouter';
import { renderRoutes } from 'react-router-config';
import routes from './routes'; # 上文定义的routes配置；

const router = express.Router();

router.get('*', (req, res) => {
  let context = {};
  const content = renderToString(
    <StaticRouter location={req.url} context={context}>
      {renderRoutes(routes)}
    </StaticRouter>
  );
  res.render('index', {title: 'Express', data: false, content });
});

module.exports = router;
复制代码

实现你的root component:

# RootApp.js
import React from "react";
import { renderRoutes } from "react-router-config";

const RootApp = (props) => {
  return (
    <div>
      {renderRoutes(props.route.routes)} # 分布式，如果你使用嵌套路由，在你的每个father component上做类似的render；
    </div>
  );
};

export default RootApp;
复制代码

renderRoutes会帮你做类似这样的事情：

render() {
  return(
    <Switch>
      <Route exact path="/" component={Home}/>
      <Route path="/home" component={Home}/>
      <Route path="/list" component={List}/>
    </Switch>
  )
}
复制代码

3. fetch 数据

如果你的app需要fetch数据，v4下可以使用以下几种方式：

集中式：

在你的路由配置中把fetch动作配置好，然后server.js内统一处理：

# routes.js
import RootApp from './RootApp';
import Home from './Home';
import List from './List';

import {fetchRootData，fetchHomeData, fetchListData} from './fetchData';

const routes = [
  { component: RootApp,
    fetchData: () => {fetchRootData}
    routes: [
      { path: '/',
        exact: true,
        component: Home，
        fetchData: () => {fetchHomeData}
      },
      { path: '/home',
        component: Home,
        fetchData: () => {fetchHomeData}
      },
      { path: '/list',
        component: List,
        fetchData: () => {fetchListData}
      }
    ]
  }
];

export default routes;
复制代码
# server.js
import express from 'express';
import request from 'request';
import React from 'react';
import { renderToString } from 'react-dom/server';
import StaticRouter from 'react-router-dom/StaticRouter';
import { renderRoutes } from 'react-router-config';
import routes from './routes'; # 上文定义的routes配置；

const router = express.Router();

router.get('*', (req, res) => {
  const {path, query} = req;
  const matchedRoutes = matchRoutes(routes, path); # 注意，这里使用path做match而不是req.url, 因为req.url内含query，v4 router在做正则match的时候并不会过滤query；
  const store = configureStore();
  const dispatch = store.dispatch;
  
  const promises = matchedRoutes.map(({route}) => {
    let fetchData = route.fetchData;
    return fetchData instanceof Function ? fetchData(store) : Promise.resolve(null)
  });
  return Promise.all(promises)
    .then(throwErrorIfApiResponseFailed(store)) # implement yourself
    .then(handleSuccessPage(store, req, res)) # server side <StaticRouter> render, implement yourself
    .catch(handleError(res, query)); # error handler, return error page and error code, implement yourself
});

module.exports = router;
复制代码

这种方式集中配置，集中处理，但是有一个问题需要注意的是client side如何fetchData，v4已不直接支持history.listen（client url变化时可以拦截并追加一系列操作）, 所以需要寻找一种方式让client side也能拿到数据。

分布式：

使用react生命周期函数，在合适的时机触发Action请求数据，将fetch数据动作散落在每个component级；

#
componentDidMount() {
    fetchData();
}
复制代码

你可能会有疑问，这只能给client用啊，server side怎么办？你可以把fetchData Action这样绑到component上，然后server side也可以统一处理：

# RootApp
class List extends Component {
  static fetchData(store) {
    return store.dispatch(fetchUsers());
  }

  componentDidMount() {
    this.props.fetchUsers();
  }
 render() {
   return <div></div>
 }
}
复制代码
# server.js
import express from 'express';
import request from 'request';
import React from 'react';
import { renderToString } from 'react-dom/server';
import StaticRouter from 'react-router-dom/StaticRouter';
import { renderRoutes } from 'react-router-config';
import routes from './routes'; # 上文定义的routes配置；

const router = express.Router();

router.get('*', (req, res) => {
  const {path, query} = req;
  const matchedRoutes = matchRoutes(routes, path); 
  const store = configureStore();
  const dispatch = store.dispatch;
  
  const promises = matchedRoutes.map(({route}) => {
    let fetchData = route.component.fetchData;
    return fetchData instanceof Function ? fetchData(store) : Promise.resolve(null)
  });
  return Promise.all(promises) # server side 集中请求数据；
    .then(throwErrorIfApiResponseFailed(store))
    .then(handleSuccessPage(store, req, res)) # server side <StaticRouter> render, implement yourself
    .catch(handleError(res, query)); # error handler, return error page and error code, implement yourself
});

module.exports = router;

复制代码

5. Handle 404 错误页面

# routes.js
import RootApp from './RootApp';
import Home from './Home';
import List from './List';

const routes = [
  { component: RootApp,
    routes: [
      { path: '/',
        exact: true,
        component: Home
      },
      { path: '/home',
        component: Home
      },
      { path: '/list',
        component: List
      },
      {
+       path: '*',
+       component: NotFound
      }
    ]
  }
];

export default routes;
复制代码

你的NotFound component自己维护错误码；

# Notfound.js
import React from 'react';
import { Route } from 'react-router-dom';

const NotFound = () => {
  return (
    <Route render={({ staticContext }) => {
      if (staticContext) {
        staticContext.status = 404;
      }
      return (
        <div>
          <h1>404 : Not Found</h1>
        </div>
      )
    }}/>
  );
};

export default NotFound;
复制代码

server 端：

# server.js
import express from 'express';
import request from 'request';
import React from 'react';
import { renderToString } from 'react-dom/server';
import StaticRouter from 'react-router-dom/StaticRouter';
import { renderRoutes } from 'react-router-config';
import routes from './routes'; # 上文定义的routes配置；

const router = express.Router();

router.get('*', (req, res) => {
  let context = {};
  const content = renderToString(
    <StaticRouter location={req.url} context={context}>
      {renderRoutes(routes)}
    </StaticRouter>
  );
+ if(context.status === 404) { # 获取状态码并响应；
+     res.status(404);
+ }
  res.render('index', {title: 'Express', data: false, content });
});

module.exports = router;
复制代码

5. Handle redirects重定向

# routes.js
import AppRoot from './AppRoot';
import Home from './Home';
import List from './List';
import NotFound from './Notfound';
+import ListToUsers from './ListToUsers';

const routes = [
  { component: AppRoot,
    routes: [
     { path: '/',
        exact: true,
        component: Home
      },
      { path: '/home',
        component: Home
      },
+     { path: '/list',
+       component: ListToUsers
+     }
+     { path: '/users',
+       component: List
+     }
      {
        path: '*',
        component: NotFound
      }
    ]
  }
];

export default routes;
复制代码

与404 的处理类似，component自己维护状态码：

# ListToUsers.jsx
import React from 'react';
import { Route, Redirect } from 'react-router-dom';

const ListToUsers = () => {
  return (
    <Route render={({ staticContext }) => {
      if (staticContext) {
        staticContext.status = 302;
      }
      return <Redirect from="/list" to="/users" /> # react redirect
    }}/>
  );
};

export default ListToUsers;
复制代码

server 端：

# server.js
import express from 'express';
import request from 'request';
import React from 'react';
import { renderToString } from 'react-dom/server';
import StaticRouter from 'react-router-dom/StaticRouter';
import { renderRoutes } from 'react-router-config';
import routes from './routes'; # 上文定义的routes配置；

const router = express.Router();

router.get('*', (req, res) => {
  let context = {};
  const content = renderToString(
    <StaticRouter location={req.url} context={context}>
      {renderRoutes(routes)}
    </StaticRouter>
  );
  if(context.status === 404) {
      res.status(404);
  }
+ if (context.status === 302) { # 获取状态码并响应；
+     return res.redirect(302, context.url);
+   }
  res.render('index', {title: 'Express', data: false, content });
});

module.exports = router;

复制代码

关于react-router-v4 如何做 server side render就介绍到这里啦，示例中有部分为伪代码。v4 让你更加灵活的处理多页面。

weixin_33812433
关注
React16.x中的服务端渲染（SSR）
liwusen的博客
04-11 6274
简要介绍：为了SEO和加快首屏加载速度，React提供了服务端渲染（Server Side Render）。本文结合express，来介绍一下React16.x中的SSR。 本例代码：https://github.com/forthealllight/react16.0-ssr 一、为什么要SSR 单页应用将UI层和内容都由javascript来渲染，搜索引擎或网页爬虫需要完成的HTML结构...
React Server Side Rendering 解决 SPA 应用的 SEO 问题
weixin_33720452的博客
12-09 187
原文地址：https://blog.coding.net/blog/React-Server-Side-Rendering-for-SPA-SEO作者：书一@Coding 前端技术的流行，衍生了许多前端框架，如 Angular JS、Polymer、Backbone,Ember.js 等，这些前端框架有些支持创建一个单页 Web 应用（S...
react服务器端渲染
miin_ying的博客
05-21 395
1.服务器端渲染VS客户端渲染 服务器端渲染(SSR:server side render)： 服务器端去后台获取数据，将数据和页面元素进行拼装，组合后完成的html页面再直接返回给浏览器。这个过程叫服务器端渲染。（博客园） 判断是不是服务器渲染：右键点击查看网页源代码。如果页面上的所有字段都能在源代码中找到，说明是服务器端渲染产生、 客户端渲染：(CER:client side render) ...
React: Server-Side Rendering React服务器端渲染教程 Lynda课程中文字幕
lyndacn的博客
01-02 280
React: Server-Side Rendering 中文字幕 React服务器端渲染 中文字幕React: Server-Side Rendering 服务器端渲染使您可以根据网络和设备情况优化应用程序以使用客户端或服务器资源 在慢速网络上的旧设备？ 在服务器上呈现 新设备，快速网络？ 你应该让客户做这项工作 一些人将所得到的架构称为“普遍”，其他人则称之为“同构”，但结果很平滑 了解如何...
对React SSR的理解(Server-Side-Rendering)
hyqhyqhyqq的博客
02-08 165
服务端渲染是数据与模版组成的html，即 HTML = 数据 ＋ 模版。将组件或页面通过服务器生成html字符串，再发送到浏览器，最后将静态标记"混合"为客户端上完全交互的应用程序。页面没使用服务渲染，当请求页面时，返回的body里为空，之后执行js将html结构注入到body里，结合css显示出来;
使用React和React Router进行服务器渲染的深入指南
cumi6497的博客
07-22 850
Server side rendering a React app can provide a few different benefits, including performance and SEO. The problem is that with those benefits comes a cost of additional complexity to your application...
关于react-router/react-router-dom v4 history不能访问问题的解决
11-28
总结一下，`react-router-dom` v4版本中，要访问`history`对象，需要在应用中使用`BrowserRouter`作为顶级容器，并在子组件中声明`contextTypes`以接收`router`对象。这样，我们就可以在任何组件中实现动态的页面...
koa-react-router：用于koa 2的react-router中间件
02-03
npm install koa-react-router react react-dom react-router --save 注意： react react-dom和react-router都是koa-react-router peerDependencies 。 可以将koa-react-router轻松安装在koa 2应用程序中，如下所...
react-router:react-router 中文文档
04-29
react-router-dom React路由器的DOM绑定 react-router-native 用于React路由器的React Native绑定 react-router-redux Integration with React Router and Redux react-router-config 静态路由配置助手 About react-...
react-router-CN：React Router V4中文文档
02-19
React Router核心组件 用于DOM绑定的React Router 用于的React路由器 React Router和Redux的集成 静态路由配置帮助助手 加群交流 React技术交流1群（已满）： React技术交流2群： 鸣谢 感谢支持React Router的...
React 16使用了Portals时，Server Side Render碰到的问题
weixin_34259232的博客
09-28 161
2019独角兽企业重金招聘Python工程师标准>>> ...
面试官：说说React服务端渲染怎么做？原理是什么？
weixin_44475093的博客
08-04 1991
一、是什么在SSR中，我们了解到Server-Side Rendering ，简称SSR，意为服务端渲染指由服务侧完成页面的 HTML 结构拼接的页面处理技术，发送到浏览器，然后为其绑定状...
React server rendering —— 网易美学主站同构实录
网易数帆社区博客
11-13 331
此文已由作者张硕授权网易云社区发布。 欢迎访问网易云社区，了解更多网易技术产品运营经验。网易美学主站在最初开发时，因为各种历史原因，引入了例如JQuery，Bootstrop，Angular， React等框架，代码结构比较混乱，给后续的开发和维护带来了很大的不便。所以对它进行了重构。下面，我会从以下三个方面对主站的重构方案进行介绍：我们为什么进行重构？如何使用React进行同构同构过程中遇到的问...
server side render渲染的一些理解以及思考
zjscy666的博客
08-20 1334
问题产生 小编最近迷上ssr，看了点源码，结果你懂的，小编思考了一大堆问题，请教了一大堆大佬，也和同事讨论了好久，最后终于搞明白了！小编也刷了下vue的ssr，以及一些react的ssr，下面为大家一边分析问题，一边总结！ 问题及解决 .1.如何保持服务端store（缓存数据）和客户端一致以及引申出来的问题 我们用的项目会用到一些共用的store存储数据，比如vuex，redux等，小编看了vue...
SSR(Server side render) 核心原理是什么？
weixin_34239592的博客
04-14 2590
我们在webpack打包我们的代码的时候，提供了两个入口文件： server entry; client entry; 分别供服务端和客户端使用： server entry :主要是为了返回我们服务端新创建的vue 实例； client entry ：主要是将我们的vue 实例挂载到我们的指定元素上； 通过webpack build 打包完成以后： 会生成server bundle 和 c...
【转】从零开始React服务器渲染
theScoreONE的博客
02-13 6524
一.前言 当我们选择使用Node+React的技术栈开发Web时，React提供了一种优雅的方式实现服务器渲染。使用React实现服务器渲染有以下好处：         1.利于SEO：React服务器渲染的方案使你的页面在一开始就有一个HTML DOM结构，方便Google等搜索引擎的爬虫能爬到网页的内容。         2.提高首屏渲染的速度：服务器直接返回一个填满数据的H
使用Nashorn Engine进行React Server-Side Rendering
沈得甫的专栏
04-02 1994
几个月前上线了一个电子商务系统平台，运用React开发前web前端，Groovy开发后端 REST API，应用性能及前端交互的响应非常好，但是有一个非常大的痛点。 整个React应用包括库与应用代码在minfy之后仍然超过`2MB`。当用户第一次访问应用浏览器无缓存时，页面一片空白，原因是浏览器需要下载JavaScript文件。即使已经使用webpack进行代码分割，访问页面仍需要下载`1.5MB`以上Javas
js中【Worker】相关知识点详细解读
2301_79858914的博客
09-11 869
JavaScript 中的 Worker 是一个可以在后台线程中运行代码的 API，这样可以避免主线程（通常是 UI 线程）被阻塞。使用 Worker 时，JavaScript 可以在多线程环境中工作，解决了单线程的瓶颈问题。通常情况下，JavaScript 是单线程的，也就是所有的代码（包括 DOM 操作和事件处理等）都在同一个线程里执行。如果某段代码需要大量计算，或者运行时间过长，会阻塞整个页面，导致界面卡顿甚至崩溃。Worker提供了一种将复杂或耗时的任务分配到后台线程执行的方法。
【JavaScript】LeetCode：707设计链表
最新发布
weixin_45980065的博客
09-14 575
【代码】【JavaScript】LeetCode：707设计链表。
深入解析react-router@4.0：使用与源码剖析
"这篇教程主要关注的是react-router@4.0的使用方法和源码分析，作者通过实例展示了如何配置和使用这个版本的路由库。文章提到了react-router-dom@4.3.0或react-router@4.4.1的相关内容，并在示例中讲解了如何设置...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值