Adding Page Titles to React App
Tags: webdev, beginners, tutorial, react
Published: 2024-03-11 18:00:36

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:

```bash
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`.

```jsx
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.

```jsx
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.

```jsx
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;
```

**OR**

```jsx
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!