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";
}

编辑：

在React 17中将弃用

componentWillMount，因此您可以使用componentDidMount代替。

Answer 3

要获得更好的api和服务器呈现效果，请使用react-helmet。它也是最简单的一线工具。

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

3 个答案: