React服务端渲染之路08——404和重定向

全部源代码、文档和图片都在 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);

相关阅读

• 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优化