How To Customize The Title Of Any Page In React

Today we will learn about how to customize or dynamically change page title in react.

As you see in the below image by default title on react page is React App.

You can change this title in index.html  as per your wish.

But what when we want to change page title based on our current page OR when we route from one component to another?

For that purpose, we can use react-helmet to manage our page head.

npm i react-helmet

After installing the above dependencies we can easily manage the page head.

If you traverse  from one component to another page then page head remains same as the previous but using react-header we can solve this problem.

For ex: If we routes from the home component to the about component title doesn’t change.

If you want to change the title on routes then add following code.

import React from 'react'
import { Helmet } from 'react-helmet'

const AboutComponent = () => {
    return (
        <div>
            <Helmet>
                <title>Project Name | About</title>
            </Helmet>
            {/* Your other code */}
        </div>
    )
}

export default AboutComponent

Output:

Using react-helmet we can also change title, base, meta, link, script, noscript, and style tags.