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


1、在 react 的 container 组件中 componentDidMount 生命周期中

document.title = "这是title名称";

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

<Route
  path="qa"
  component={QA}
  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 (
    <ReactDocumentTitle title="文档标题">

    </ReactDocumentTitle>
)
}

注意 本文出处于链接:https://www.jianshu.com/p/0a38a81da70b


文章作者: BiLiang
版权声明: 本博客所有文章除特別声明外,均采用 CC BY 4.0 许可协议。转载请注明来源 BiLiang !
评论
 上一篇
js数学及数组常见方法 js数学及数组常见方法
这里是我的笔记,记录一些js遍历数组及过滤数组的常用方法,这个笔记后面慢慢增加了许多内容,如果有错误之处,请各位多多指教。
2021-09-18
下一篇 
React 事件冒泡及处理 React 事件冒泡及处理
在开发项目中,我有一个列表要两个事件,点击列表大框,跳转详情,点击列表其他按钮,跳转其他页面,然而点击其他按钮时,会先跳转详情然后在到其他页面。为此总结一下
2021-04-29
  目录