Dynamically Updating Component Titles with React Router v4 and Beyond

Introduction

In modern web applications, navigation plays a crucial role in enhancing user experience. One common requirement is to dynamically update component titles based on the current route. This tutorial explores how you can achieve this using React Router, focusing on both version 4 and later versions.

Understanding React Router

React Router is a popular library for handling routing in React applications. It allows developers to define routes that correspond to different components or pages within an application. When users navigate between these routes, the appropriate component renders accordingly.

Setting Up Your Environment

Before diving into dynamic title updates, ensure your environment is set up with React and React Router:

1. Create a new React app:

   npx create-react-app react-router-tutorial
   cd react-router-tutorial
   

2. Install React Router:

   npm install react-router-dom@6
   

Using React Router v4

In React Router v4, obtaining the current route information requires a combination of hooks and higher-order components (HOCs). Here’s how you can dynamically update component titles:

Step 1: Setup Basic Routing

Firstly, set up basic routing in your application. Use BrowserRouter, Route, and Switch to define routes.

import React from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';

function App() {
  return (
    <Router basename='/app'>
      <div>
        <AppBar />
        <Switch>
          <Route path="/customers" component={Customers} title="Customer List" />
          <Route path="/orders" component={Orders} title="Order Summary" />
        </Switch>
      </div>
    </Router>
  );
}

Step 2: Create a Higher-Order Component

To pass the title to your AppBar, you can create a higher-order component using withRouter.

import React from 'react';
import { withRouter } from 'react-router-dom';

function AppBar({ location, children }) {
  const route = (1...).find(
    r => matchPath(location.pathname, r)
  );

  return (
    <header>
      <h1>{route ? route.title : "Default Title"}</h1>
      {children}
    </header>
  );
}

export default withRouter(AppBar);

Step 3: Use matchPath to Access Route Information

The matchPath function helps in matching the current pathname with the defined routes and extracting relevant data such as titles.

import { matchPath } from 'react-router-dom';

const routes = [
  {
    path: '/customers',
    component: Customers,
    title: "Customer List",
  },
  {
    path: '/orders',
    component: Orders,
    title: "Order Summary",
  },
];

Using React Router v5 and Beyond

From React Router v5 onwards, a simpler approach is available using the useLocation hook.

Step 1: Update Your Component to Use Hooks

React hooks simplify state management and side effects in functional components. Here’s how you can use useLocation.

import React from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import { useLocation } from 'react-router-dom';

function App() {
  const location = useLocation();
  
  const route = (1...).find(
    r => matchPath(location.pathname, r)
  );

  return (
    <Router basename='/app'>
      <AppBar title={route ? route.title : "Default Title"} />
      <Switch>
        <Route path="/customers" component={Customers} title="Customer List" />
        <Route path="/orders" component={Orders} title="Order Summary" />
      </Switch>
    </Router>
  );
}

Step 2: Simplify with useLocation

With useLocation, you can directly access the current location object, making it easier to extract and utilize route-related data.

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

function AppBar({ title }) {
  return (
    <header>
      <h1>{title}</h1>
    </header>
  );
}

export default AppBar;

Conclusion

By leveraging the capabilities of React Router, you can dynamically update component titles based on the current route. This enhances user experience by providing context-specific information in your application’s header or navigation bar. Whether using HOCs and hooks with React Router v4 or embracing hooks in later versions, these techniques ensure a seamless integration of dynamic routing features.