OiO.lk Community platform!

Oio.lk is an excellent forum for developers, providing a wide range of resources, discussions, and support for those in the developer community. Join oio.lk today to connect with like-minded professionals, share insights, and stay updated on the latest trends and technologies in the development field.
  You need to log in or register to access the solved answers to this problem.
  • You have reached the maximum number of guest views allowed
  • Please register below to remove this limitation

React - Resetting the document title when a user navigates away from the page

  • Thread starter Thread starter user978426
  • Start date Start date
U

user978426

Guest
I am faced with a problem and I am hoping someone might know how to overcome it.

The pages across all of our site have a default title, as per our index.html file:

Code:
<html lang="en">
  <head>
    <title>My Page Title</title>
  </head>
  ...
</html>

This means that all tabs display the page title as per the index file.

On one page of the site, I want to override the title as per the information that is returned from a page load.

For example:

Code:
useEffect(() => {
  const displayTitle = loadTitle();
  document.title = displayTitle;
  }, []);

This works exactly as I would like, when the tab loads, the tab title is updated.

The issue however is when a user clicks a link to navigate away from that page. The tab title remains as the value that was loaded, despite another page having loaded within that tab. The tab title displays as that loaded value until the page is hard refreshed.

Is there any way for me to set the document title for a page via a load, like illustrated above, but to have it return to the default value once navigated away?

<p>I am faced with a problem and I am hoping someone might know how to overcome it.</p>
<p>The pages across all of our site have a default title, as per our index.html file:</p>
<pre><code><html lang="en">
<head>
<title>My Page Title</title>
</head>
...
</html>
</code></pre>
<p>This means that all tabs display the page title as per the index file.</p>
<p>On one page of the site, I want to override the title as per the information that is returned from a page load.</p>
<p>For example:</p>
<pre><code>useEffect(() => {
const displayTitle = loadTitle();
document.title = displayTitle;
}, []);
</code></pre>
<p>This works exactly as I would like, when the tab loads, the tab title is updated.</p>
<p>The issue however is when a user clicks a link to navigate away from that page. The tab title remains as the value that was loaded, despite another page having loaded within that tab. The tab title displays as that loaded value until the page is hard refreshed.</p>
<p>Is there any way for me to set the document title for a page via a load, like illustrated above, but to have it return to the default value once navigated away?</p>
 
Top