react changing page title - react-router

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.

Answer 2

Simply use this function which i customly built .
get the href location of your url.
split the path name
use it as your dynamic page title
const basename = (path) => { return path.split("/").reverse()[1] } const pageTitle = (typeof window !== 'undefined' )?basename(window.location.href): null