所有源代码、文档和图片都在 github 的仓库里，点击进入仓库
相关阅读
- React服务端渲染之路01——项目基础架构搭建
- React服务端渲染之路02——最简单的服务端渲染
- React服务端渲染之路03——路由
- React服务端渲染之路04——redux-01
- React服务端渲染之路05——redux-02
- React服务端渲染之路06——优化
- React服务端渲染之路07——添加CSS样式
- React服务端渲染之路08——404和重定向
- React服务端渲染之路09——SEO优化
1. 404 页面
- 404 页面需要客户端告诉服务端，这个页面是否匹配到了，如果没有匹配到，该如何操作，所以我们还是需要使用 StaticRouter 的 context 属性来传递数据
- 所以，我们先新建一个 404 的组件，/src/containers/NotFound/index.js
- 这里对 staticContext 的定义时添加一个 NotFound 为 true 的属性，服务端拿到这个属性，可以知道是否是进入到了 404 页面
- 新建 404 组件 /src/containers/NotFound/index.js
// /src/containers/NotFound/index.js
import React, { Component } from 'react';
class NotFound extends Component {
componentWillMount() {
const { staticContext } = this.props;
staticContext && (staticContext.NotFound = true);
}
render() {
return (
<div>404 NotFound</div>
);
}
}
export default NotFound;- 添加路由 /src/routes.js
export default [
{
path: '/',
component: App,
key: 'app',
routes: [
{
path: '/',
component: Home,
loadData: Home.loadData,
exact: true,
key: '/'
},
{
path: '/news',
component: News,
exact: true,
key: '/news'
},
{
component: NotFound
}
]
}
];- 因为页面是 404， 所以我们需要修改一下 HTTP 的状态码
if (context.NotFound) {
res.status(404);
}
res.send(html);- 其实这个还是比较简单的，没有什么复杂的地方，就是在 NotFound 组件里定义一个 NotFound 的属性，在服务端校验，然后对应做处理就可以了
- 5xx 页面和 404 页面是一样的，服务端 catch 到错误，就返回 500 错误，同时渲染 500 的页面
2. 重定向页面
- 假如我们有一个需要登录才能查看的页面，但是用户没有登录，所以他不能查看，但是我们要把页面重定向到登录页面，让用户进行登录，所以我们需要进行重定向
- 假如我们现在在进入 /news 页面的时候，需要用户重定向到 / 页面，我们可以在 News 组件里这么操作
import React, { Component } from 'react';
import {Redirect } from 'react-router-dom';
class News extends Component {
render() {
return (
<Redirect to="/" />
);
}
}
export default News;- 纯粹的客户端渲染，我们也是这个做的，直接使用 Redirect 组件，传递 to 属性就可以了
- 此时我们在服务端查看 context 的值，就可以查看到一些新的属性
{ csses: [],
action: 'REPLACE',
location: {
pathname: '/',
search: '',
hash: '',
state: undefined
},
url: '/'
}- 这里有一个 action 的属性，值是 REPLACE，这个是 react-router-dom 帮我们做的，当页面使用 Redirect 组件进行重定向的时候，context 里会添加 action， location 和 url 属性
- 所以，我们可以使用这些属性在服务端做对应的操作，这里的 redirect 的 url 要使用 context 里的属性，因为可能会有多个重定向组件，我们不知道要重定向到哪里
- 其实这个也比较简单，没有什么难度
if (context.action === 'REPLACE') {
res.redirect(301, context.url);
}
res.send(html);- 404和重定向写在一起
if (context.action === 'REPLACE') {
res.redirect(301, context.url);
} else if (context.notFound) {
res.statusCode = 404;
}
res.send(html);