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="https://dev.to/" exact component={Home} />
<Route path="https://dev.to/about" component={About} />
{/* Add more routes as needed */}
</Router>
);
export default App;
OR
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="https://dev.to/"
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!
Subscribe To Our Newsletter
Enter your email address to subscribe
