Question 136739 in Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – How to change page title according to path

im writing a react app and i need to change the page title according to the path im currently on, for now i have the page title change according to the navbar tab click, and i have another button on the navbar (on the top-bar section of it) redirects me to a page within the app but since the button is not inside the side-bar (hamburger menu) the page title dosent change.

this is Navbar.js:

import React, { useState, useEffect } from "react";
import { Link, useLocation } from "react-router-dom";
import { NavbarData } from "./NavbarData";
import { IconContext } from "react-icons";
import "./Navbar.css";
import Hamburger from "./Icons/Hamburger.svg";
import closeIcon from "./Icons/Close.svg";
import "./Icons/p_logo_color.png";
import Persona from "./Icons/Persona.svg";

function Navbar() {
  const [sidebar, setSidebar] = useState(false);
  const showSidebar = () => setSidebar(!sidebar);
  const [pageName, setPageName] = useState('Operational Overview');
  const location = useLocation();

  const getPageTitleByUrl = (path) => {
    NavbarData.filter((navItem) => {
    
      if(navItem.path === path) {
        setPageName(navItem.title);
      }
      
    } )
    

  };

  useEffect(() => {
    if(location.pathname) {
      getPageTitleByUrl(location.pathname);
    }
  }, [location] ); 
  

  return (
    <>
      <IconContext.Provider value={{ color: "undefined" }}>
        <div className="navbar">
          <Link to="#" className="menu-bars">
             <img src={Hamburger} alt="hamburger" onClick={showSidebar} />
          </Link>
          <div className="pageTitle"><h1>{pageName}</h1></div>
          <Link to='userconfig'>
          <div><img className="userIcon" src={Persona} alt="persona" /> </div>
          <div className="userButton">User123#</div>
          </Link>
          <Link to='/' className="logout-button" >Log Out</Link>
        </div>
        <nav className={sidebar ? "nav-menu active" : "nav-menu"}>
          <ul className="nav-menu-items" onClick={showSidebar}>
            <li className="navbar-toggle">
              <Link to="#" className="menu-bars">
              <img src={closeIcon} alt=''/>
              </Link>
            </li>
            {NavbarData.map((item, index) => {
              return (
                <li key={index} className={item.cName}>
                  <Link to={item.path}>
        
                    <span className="navbutton-text" ><span className="navbutton-icon">{item.icon}</span>{item.title}</span>
                    
                    
                  </Link>
                  
                </li>
                
              );
            })}
          </ul>
        </nav>
      </IconContext.Provider>
    </>
  );
}

export default Navbar;

This is NavbarData.js:

import React from 'react'


import settingsIcon from './Icons/Settings.svg';
import startpageIcon from './Icons/startpage.svg';
import performance from './Icons/performance.svg';
import bars from './Icons/bars.svg';
import simulation from './Icons/simulation.svg';
import plan from    './Icons/plan.svg';
import fraud from './Icons/fraud.svg';



export const NavbarData = [
    {
        title: 'Operational Overview',
        path: '/monitoringoverview',
        icon: <img src={startpageIcon} alt="" />,
        cName: 'nav-text'
    },
    {
        title: "Performance Quality",
        path: "/performancequality",
        icon: <img src={performance} alt="" />,
        cName: 'nav-text'
    },
    {
        title: "Finance",
        path: "/finance",
        icon: <img src={bars} alt="" />,
        cName: 'nav-text'
    },
    {
        title: "Fraud and Anomalies",
        path: "/fraudandanomalies",
        icon: <img src={fraud} alt="" />,
        cName: 'nav-text'
    },
    {
        title: "Simulation",
        path: "/simulation",
        icon: <img src={simulation} alt="" />,
        cName: 'nav-text'
    },
    {
        title: "Planning",
        path: "/planning",
        icon: <img src={plan} alt="" />,
        cName: 'nav-text'
    },
    {
        title: "Settings",
        path: "/settings",
        icon: <img src={settingsIcon} alt="" />,
        cName: 'nav-text'
    },
    
  


]

I have a function which takes the path saved inside NavbarData.js but the user button is not there

  const getPageTitleByUrl = (path) => {
    NavbarData.filter((navItem) => {
    
      if(navItem.path === path) {
        setPageName(navItem.title);
      }
      
    } )
    

  };
Tags:

2

Answers


  1. 0

    To change the page title based on the current path in a React app, you can use the useEffect hook to update the document title whenever the path changes. Here’s an example:

    import { useEffect } from "react";
import { useLocation } from "react-router-dom";

function App() {
  const location = useLocation();

  useEffect(() => {
    document.title = location.pathname;
  }, [location]);

  return (
    // your app code here
  );
}

export default App;

    In this example, we’re using the useLocation hook from the react-router-dom library to get the current path. Then, we’re using the useEffect hook to update the document title whenever the path changes. We’re also using the location.pathname property to set the document title to the current path.

    By doing this, the page title will be updated whenever the path changes, regardless of whether the user clicks on a navbar tab or a button outside of the sidebar.

    Login or Signup to reply.
  2. 0

    Add the below useEffect hook in NavBar component

    useEffect(() => {
    //this will be executed while the pageName state will change
    document.title=pageName; 
}, [pageName]);
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search