react changing page title

Question

I know I can use react-document-title and react-helmet to change the page title. But I have a problem.

react-document-title can set the default page title like:

function App() {
  // Use "My Web App" if no child overrides this
  return (
    <DocumentTitle title='My Web App'>
      <SomeRouter />
    </DocumentTitle>
  );
}

Can react-helmet do the same thing?

In addition, from the example in github, both of them are using a static title. Can they do thing like youtube where the title is not static?

If you are in youtube main page, the page title show Youtube.
if you are watching a video, the page title shows the video's name with -youtube.

Obviously, - youtube is static, and the video's name is dynamic.

The goal is that I want to set the default title in router.js (like react-document-title), then if the component requires the title (default title plus the component's page title), change the page title. If it's not required, then use the default title using this code:

function App() {
  // Use "My Web App" if no child overrides this
  return (
    <DocumentTitle title='My Web App'>
      <Router path="/" component={Home} />
    </DocumentTitle>
  );
}

function HomePage() {
  // Use "Home" while this component is mounted
  return (
    //trying to do something like this
    <DocumentTitle title='${default title } -Home'>
      // output: My Web App - Home
      <h1>Home, sweet home.</h1>
    </DocumentTitle>
  );
}

Can you show the example, since I need it to understand this?

Answer 1

You can try document.title for changing the title of the page as the code below.

import React from 'react';

const DemoComponent= () => {
  document.title = "This is demo Component";
  return (
    <div className="container">
      <div className="row">
        <h1> My Component</h1>
      </div>
    </div>
  );
}

export default DemoComponent;

Here I have set the title of the page "This is demo Component". So, when this component is rendered, the title of the page will be changed.