React 设置网页title

最新推荐文章于 2025-05-20 14:32:22 发布

原创最新推荐文章于 2025-05-20 14:32:22 发布 · 7.9k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#react

react 专栏收录该内容

2 篇文章

订阅专栏

我们可以通过listen监听数据的变化

1）需要在引入路由的时候引入withRouter

import { Switch, Route, NavLink, Redirect, withRouter } from 'react-router-dom';

在暴露的地方吧根组件包裹起来

export default withRouter( App);

2）在constructor中this.props.history.listen中执行location.pathname能够观察到路由的变化

constructor(props) {
        super(props);
        console.log('app',this.props.history)
        this.props.history.listen((location)=>{
            console.log(location.pathname)
            switch(location.pathname){
                case '/list':
                    document.title="列表";
                    break;
                case '/items':
                    document.title="内容";
                    break;
                case '/list/users':
                    document.title="用户";
                    break;
                case '/list/companies':
                    document.title="公司";
                    break;
                default:break;
            }
        })
    }