如何在reactjs中使用路由器重定向页面时更改页面标题？

Question

我有一个迷你项目,其中第一页有标题主页但下一页联系人是点击链接它保留主页作为标题.我已经明确宣布标题为"联系我们",但它也显示了主页.

这是我的代码:

对于App.js:

import React, { Component } from 'react';
import {BrowserRouter as Router, Route, Switch, Link} from 'react-router-dom';
import ContactUs from '/Users/yashchoksi/Documents/linking/src/ContactUs';
class App extends Component {
  render() {
    return (
      <Router>
        <div>
          <title>HomePage</title>
          <Link to="/src/ContactUs">Contact Us</Link>
          <Switch>
            <Route exact path="/src/ContactUs" component={ContactUs}/>
          </Switch>
        </div>
      </Router>
    );
  }
}

export default App;

并联系我们页面:

import React, { Component } from 'react';

class ContactUs extends Component {
  render(){
    return(
      <div>
        <title>ContactUs</title>
        Hello From COntactUs.
      </div>
    );
  }
}
export default ContactUs;

请查看并告诉我如何声明动态命名的标题!

Answer 1

您可以在组件中进行设置:

import React, { Component } from 'react';

class ContactUs extends Component {
  componentDidMount() {
    document.title = 'Contact Us'
  }
  render(){
    return(
      <div>
        <title>ContactUs</title>
        Hello From COntactUs.
      </div>
    );
  }
}
export default ContactUs;

Answer 2

只需使用以下代码:

componentWillMount(){
    document.title="Title name";
}

编辑:

componentWillMount将在React 17中弃用,因此您可以使用componentDidMount.