In reactjs how to change the Page title as same as the page route link name?

Question

In Reactjs, How to change the page title as dynamically. For Example: When we redirect to a new page that new page route line should come as a page title

For Example: If Home page then tile should be xxx Home, if in contact page then title should be xxx Contact

You can use some npm package to handle that for you. Here is simple one [react-document-title](https://github.com/gaearon/react-document-title) or you can use [react-helmet](https://github.com/nfl/react-helmet) which has lot more features. — Vaibhav Vishal, Mar 27 '19 at 05:23
Possible duplicate of [How do you set the document title in React?](https://stackoverflow.com/questions/46160461/how-do-you-set-the-document-title-in-react) — Vaibhav Vishal, Mar 27 '19 at 05:26
@VaibhavVishal i have tried the both,,,but its not taking the value from the link whateven i ahve to give manualy — Ramya, Mar 27 '19 at 06:32
@VaibhavVishal react-document-title working well. but i have to give the Tile for each page manually instead of that is it possible to get it automatically from the page link name for example: My Bookings for this i need page title like My Bookings — Ramya, Mar 27 '19 at 06:44
I don't think that it can be automatic, when the component for route `/my_bookings/services` mounts after you click the link, it doesn't knows which link was clicked to get there. You can have multiple links pointing to same route but with different text in different places of your app. Also what if the user enters the route `example.com/my_bookings/services` directly in the url bar instead of visiting `example.com` first then clicking your link, what will you do then. What you should do is wrap your routes(``) with `` like this: — Vaibhav Vishal, Mar 27 '19 at 07:27

score 4 · Answer 1 · answered Mar 27 '19 at 05:18

You can use Hooks, and on changing state you can use its useEffect() method.

For example,

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

Picked from React Hooks documentation

score 0 · Answer 2 · answered Mar 27 '19 at 05:15

0

Try this.

 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')
  );

answered Mar 27 '19 at 05:15

Prabu samvel

1,213
8
19

thanks...this one is working but i dont want like this. ihave 250+ pages. So its not possible to go each and every page and giving title. That's why i asked to give the link name as a page title. hope you understand my need!! – Ramya Mar 27 '19 at 07:38

In reactjs how to change the Page title as same as the page route link name?

2 Answers2