How to change title of page when page is redirected using router in reactjs?

Question

I have a mini project in which the first page having title homepage but the next page contacts is click through link it retains the homepage as title. I've explicitly declared title as Contact Us but then also it shows Homepage.

Here's my code:

For 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;

And for Contact Us page:

import React, { Component } from 'react';

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

Please see and tell me how to declare title for dynamic naming!

Miguel Calderón · Accepted Answer · 2018-03-01 11:21:22Z

8

You can set it in your component:

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;

answered Mar 1, 2018 at 11:21

Miguel Calderón

3,1011 gold badge20 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Yash Choksi Over a year ago

And what if I have more than 2 pages? Can I do it in similar way??

Miguel Calderón Over a year ago

Yes, you can ;)

Vikas Singh Over a year ago

@MiguelCalderón Do we have any approach for setting document title dynamically with client-side routing?

Miguel Calderón Over a year ago

@VikasSingh Depends on the complexity of your routes. In general, I think you can follow Dan Abramov's advice: github.com/ReactTraining/react-router/issues/… That is, either use his react-document-title package (quite outdated now) or create your own DocumentTitle component. It shouldn´t be too difficult.

Amanshu Kataria · Accepted Answer · 2019-03-02 12:48:39Z

5

Just use the following code:

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

Edit:

componentWillMount will be deprecated in React 17, so you can use componentDidMount instead.

edited Mar 2, 2019 at 12:48

answered Mar 1, 2018 at 11:24

Amanshu Kataria

3,4467 gold badges28 silver badges39 bronze badges

Comments

medv · Accepted Answer · 2018-07-06 04:51:47Z

0

For better api and server rendering, use react-helmet. It is also a one-liner at its simplest.

answered Jul 6, 2018 at 4:51

medv

14110 bronze badges

Collectives™ on Stack Overflow

How to change title of page when page is redirected using router in reactjs?

3 Answers 3

4 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related