在 reactjs 中如何将页面标题更改为与页面路由链接名称相同？

Question

在 Reactjs 中，如何动态更改页面标题。例如：当我们重定向到新页面时，新页面路由行应该作为页面标题

例如：如果主页，则磁贴应为 xxx 主页，如果在联系页面中，则标题应为 xxx 联系

Answer 1

你可以使用 Hooks，在改变状态时你可以使用它的useEffect() 方法。

例如，

import React, { useState, useEffect } from 'react';

const Example = () => {
  const [count, setCount] = useState(0);

  // Similar to componentDidMount and componentDidUpdate:
  useEffect(() => {
    // Update the document title using the browser API
    document.title = `You clicked ${count} times`;
  });

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

选自React Hooks documentation

Answer 2

试试这个。

 import React from 'react'
 import ReactDOM from 'react-dom'


 class TestPage extends React.Component{
   componentDidMount(){
    document.title = "Test page title"
   }

    render(){
     return(
      <p> hello world! </p>
     );
    }
  }

  ReactDOM.render(
    <TestPage/>,
    document.getElementById('root')
  );