Because react is a one-page application, we may need to change the title of the document according to different routes, so you may use it at this time. react-document-title Plug-in unit.

The main file code of this plug-in is 41 lines, which mainly imports the following three dependency packages:

var React = require('react'),
PropTypes = require('prop-types'),
withSideEffect = require('react-side-effect');    

Reaction-side-effect is a container similar to a Connect component, which is often referred to as a higher-order component.

However, in fact, we can think about whether we can use this plug-in to modify title s for different routes. The answer is, of course.

If you use native js, you only need one line to modify the title code:

document.title = 'I am the title.'

In react, we can encapsulate a common component with very little code to modify the title of each route.

import React from 'react'
import PropTypes from 'prop-types'
export default class ReactDocumentTitle extends React.Component {
    setTitle() {
        const { title } = this.props
        document.title = title
    }
    componentDidMount() {
        this.setTitle()
    }
    componentDidUpdate() {
        this.setTitle()
    }
    render() {
        return React.Children.only(this.props.children)
    }
}
ReactDocumentTitle.propTypes = {
    title: PropTypes.string.isRequired
}

This code is a combination of react-side-effect and react-document-title, which I call the streamlined version.

Using this component:

import ReactDocumentTitle from 'path/ReactDocumentTitle'

render() {
    return (
        <ReactDocumentTitle title="document title">
            //There can only be a single root element.
        </ReactDocumentTitle>
    )
}

If you are interested in the writing of higher-order components, you can study it. react-side-effect . It should be noted that the code of this higher-order component is the result of babel compilation, which may not seem so easy to understand.

If the code I wrote above is compiled with babel, try to understand it again.

'use strict';

exports.__esModule = true;

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _propTypes = require('prop-types');

var _propTypes2 = _interopRequireDefault(_propTypes);

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }

function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }

var ReactDocumentTitle = function (_React$Component) {
    _inherits(ReactDocumentTitle, _React$Component);

    function ReactDocumentTitle() {
        _classCallCheck(this, ReactDocumentTitle);

        return _possibleConstructorReturn(this, _React$Component.apply(this, arguments));
    }

    ReactDocumentTitle.prototype.setTitle = function setTitle() {
        var title = this.props.title;

        document.title = title;
    };

    ReactDocumentTitle.prototype.componentDidMount = function componentDidMount() {
        this.setTitle();
    };

    ReactDocumentTitle.prototype.componentDidUpdate = function componentDidUpdate() {
        this.setTitle();
    };

    ReactDocumentTitle.prototype.render = function render() {
        return _react2.default.Children.only(this.props.children);
    };

    return ReactDocumentTitle;
}(_react2.default.Component);

exports.default = ReactDocumentTitle;

ReactDocumentTitle.propTypes = {
    title: _propTypes2.default.string.isRequired
};

Here's a very interesting point. Later, when you write a react component using ES6, compile it into ES5, and publish it to github, people will think your code is much taller.