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!

🛠️ Bring your solution into Docusign. Reach over 1.6M customers.

Docusign is now extensible. Overcome challenges with disconnected products and inaccessible data by bringing your solutions into Docusign and publishing to 1.6M customers in the App Center.

Learn more