react改变title_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 (

)

}