TechQA.

How to set/make "Different Tab Title" based on the Routes/Pages in React JS

497 views Asked by At

Can't use "useParams" or "useLocation" hooks in App.js component to try a Switch Case there! Is There any other Solution except installing react npm Package managers?

or except using this function below in every component.

I will be happy if I get a single function to have the solution of my problem. Thanks in advance.

import React, { useEffect } from 'react';

function Example() {
useEffect(() => {
document.title = 'My Page Title';
}, []);
javascript reactjs dom routes page-title
Original Q&A
1

There are 1 answers

0
Anjali Chandwani On

You can define a constant of string based on routes and implment it in _app.jsx

const tabTitle ={
"/home":"Home Page",
"/profile":"My Profile Page",
}

In Render of _app.jsx

 <Head>
        <title>{tabTitle[window.location.pathname] || "My Site"}</title>
 </Head>

Related Questions in JAVASCRIPT

Related Questions in REACTJS

Related Questions in DOM

Related Questions in ROUTES

Related Questions in PAGE-TITLE

Popular Questions

Popular Tags

javascript python java c# php android html jquery c++ css ios sql mysql r reactjs node.js arrays c asp.net json

Trending Questions