根据显示的页面更新标题标题（同级组件）

Question

App.js 组件包含

<Header />

和

<Page />

组件。我希望

<h1>

根据页面组件进行更新。我在 App.js 文件中使用react-router。

如何将标题设置为每个页面组件中的道具？

例如，

About

页面组件为：

import React, { Component } from 'react';

class About extends Component {

 componentDidMount(){
  this.setState({ title: 'About Us' });
 }

 render() {
  return (
   <div className="about container">
    <p>Page content.</p>  
   </div>
  );
 }
}

export default About;

而

Header

组件是：

import React, { Component } from 'react';
import Nav from '../Nav';
import About from './components/About';

class Header extends Component {
  constructor(props) {
    super(props);
    this.state = {
      title: this.props.title
    };
  }

 render() {
  return (
   <div className="header">
     <h1>{this.state.title}</h1>
     <Nav />
   </div>
  );
 }
}

export default Header;

Answer 1

简单来说，你可以使用 React Router 来获取 App.js 组件中的当前路径名。 根据当前路径名，您可以将名为“title”的 prop 发送到标头，其中包含相应的所需名称。

例如

getTitle = () => {
    switch(this.props.location.pathname){
        case "about":
            return "About us";
        case "login":
            return "Login to app";
        default:
            return "[APP_NAME]"
    }
}

通过这种方式，您可以在一个位置捕获父组件中的当前路径名，从而以这种方式保持您的应用程序的通用性。

Answer 2

 const location = useLocation();
 useEffect(() => {
    const countNotif = count === 0 ? `` : `[${count}]`;
    const loc = location.pathname.split("/");

    let title = `${countNotif} Dashboard | `;

    for (let i = 1; i < loc.length; i++) {
      if (i === 3) break;
      const routeTitle = String(loc[i] || "");
      const capitalizedTitle = routeTitle.toCapitalize();
      title += ` ${capitalizedTitle}`;
    }

    document.title = title;
  }, [location.pathname, event]);