react根据路由动态修改页面title

1、在react的container组件中componentDidMount生命周期中
document.title="这是title名称"

2、或者在路由配置中使用onEnter事件修改
例如：

 {document.title="这是title名称"}}/>

3、使用react-side-effect是一个类似Connect组件的容器，通常它被称为高阶组件。可能就会用到react-document-title插件
例如：

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

4、封装公共组件。在react中，我们可以使用非常少的代码封装出一个公共组件，来修改每个路由的title。

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
}

这份代码是将react-side-effect和react-document-title合并。

使用该组件：

import ReactDocumentTitle from 'path/ReactDocumentTitle'
render() {
return (
    
        
    
)
}