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優化