Adding Page Titles to React App

#webdev #beginners #tutorial #react

If you're building a React application with multiple pages, you might want to give each page a unique title for a better user experience and search engine optimization. Fortunately, with the help of react-router-dom, achieving this is straightforward. In this guide, we'll walk through the steps to add a page title to every route in your React application.

Step 1: Install react-router-dom

Make sure you have react-router-dom installed in your project. If not, you can install it using:

npm install react-router-dom

Step 2: Implement react-router-dom

In your index.js or App.js (or wherever your main routing setup is), import BrowserRouter and Route from react-router-dom.

import React from 'react';
import { BrowserRouter, Routes, Route } from 'react-router-dom';

Step 3: Create a PageTitle component

Next, create a simple PageTitle component that will set the document title based on the route.

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

const PageTitle = ({ title }) => {
  const location = useLocation();

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

  return null;
};

export default PageTitle;

This component takes a title prop and sets the document title accordingly. If no title is provided, it defaults to a generic title.

Step 4: Integrate PageTitle with Routes

Now, use the PageTitle component within your Route components. For each route, pass a title prop with the desired page title.

import React from 'react';
import { BrowserRouter as Router, Route } from 'react-router-dom';
import PageTitle from './PageTitle'; // Adjust the path as per your file structure

const Home = () => (
  <>
    <PageTitle title="Home" />
    <div>
      <h1>Welcome to the Home Page</h1>
      {/* Your home page content */}
    </div>
  </>
);

const About = () => (
  <>
    <PageTitle title="About Us" />
    <div>
      <h1>About Us</h1>
      {/* Your about page content */}
    </div>
  </>
);

const App = () => (
  <Router>
    <Route path="/" exact component={Home} />
    <Route path="/about" component={About} />
    {/* Add more routes as needed */}
  </Router>
);

export default App;

import React from 'react';
import { BrowserRouter as Router, Route } from 'react-router-dom';
import PageTitle from './PageTitle'; // Adjust the path as per your file structure

const Home = () => (
  <>
    <div>
      <h1>Welcome to the Home Page</h1>
      {/* Your home page content */}
    </div>
  </>
);

const Error = () => (
  <>
    <div>
      <h1>404 | Error</h1>
      {/* Your about page content */}
    </div>
  </>
);

<BrowserRouter/>
   <Routes>
      <Route
        exact
        path="/"
        element={
          <>
            <PageTitle title="My Home Page" />
            <Home />
          </>
        }
      />
     <Route
        exact
        path="/*"
        element={
          <>
            <PageTitle title="404 | Page not found" />
            <Error />
          </>
        }
      />
   <Routes>
<BrowserRouter/>

By incorporating the PageTitle component into each route, you ensure that the document title is updated whenever the user navigates to a different page.

That's it! You've successfully added page titles to your React application using react-router-dom. This simple approach enhances the user experience and helps search engines better understand the content of each page. Happy coding!