React 16.8.6+TypeScript：无Helmet实现404页面标题修改问询

嗨～我明白你遇到的问题了：你的404页面是函数式组件，而constructor和componentDidMount()都是类组件专属的生命周期方法，所以在这个组件里用它们肯定不会生效哒。不用Helmet的话，我们可以用React的useEffect钩子来实现修改页面标题的需求，这是函数组件里处理副作用的标准方式。

下面是修改后的完整代码：

import React, { useEffect } from 'react';
import logo from '../images/logo.svg';

const NotFound: React.FC = () => {
  // 用useEffect修改页面标题，仅在组件挂载时执行一次
  useEffect(() => {
    document.title = "404 - 页面未找到"; // 这里可以改成你想要的标题文本
  }, []); // 空依赖数组确保只执行一次

  return (
    <div className="home-grid">
      <header className="center-logo">
        <img src={logo} alt="My Logo" />
      </header>
      <footer className="home-footer">
        Error 404 page not found
      </footer>
    </div>
  );
}

export default NotFound;

关键点说明： #

• useEffect是React提供的用于处理函数组件副作用的钩子，比如操作DOM、发起请求等。
• 第二个参数传空数组[]，表示这个副作用只会在组件挂载完成后执行一次，效果等同于类组件的componentDidMount()。
• 直接通过document.title修改页面标题，这是浏览器原生的API，不需要额外依赖就能生效。

这样修改后，当用户访问404页面时，页面标题就会自动更新成你设置的内容啦～

内容的提问来源于stack exchange，提问作者Bill