useHistory Hook in React for App Navigation

In my most recent project, my partner and I built a (faux) art auction site, Rotheby's. One of the features we wanted to implement was the ability of a user to click on the "Place Bid" button a specific piece of artwork, and for the user to be re-routed/directed to a new page displaying that individual piece of artwork and a form to place a bid. To implement this functionality, we called upon React's useHistory hook, and more specifically, the .push() method.

Auction Homepage with all artworks:

Re-directed page with individual artwork:

Background on React's History Object & useHistory Hook

The history package is a major dependency of ReactRouter that provides various implementations for managing session history. The useHistory hook accesses the ReactRouter history object and allows navigation to other routes using specific methods, such as .push() and .replace().

With the useHistory hook, a user can efficiently and seamlessly navigate to a specific URL, and move forward and back on different pages within an app. For my partner and my art auction application, we used the .push() method, which adds a new entry to the history stack. This provided us a way to programmatically control the browser's history and change the URL displayed in the address bar without reloading the page.

Implementation of useHistory and .push()

In the Artwork component (in our React app):

• we imported the useHistory hook at the top of the component, which gave us access to the useHistory functionality
• we declared the "history" variable to the useHistory hook
• we defined the handleRedirect function which includes the history variable, the .push() method, and the route we want to navigate to. For this project we wanted to re-direct the user to the specific artwork page (each artwork in our database had an id value associated with it)
• we assigned the handleRedirect function to the onClick event handler on the "Place Bid" button

import {useHistory } from "react-router-dom";

 const history = useHistory();

 function handleRedirect() {
   // redirect to /artworks/:id
   history.push(`/artworks/${id}`);
 }

return(
     <button className="bidButton" onClick={handleRedirect}>
            Place Bid
     </button>
); 

Once the user clicks on the "Place Bid" button, they are re-directed to the URL with that specific artwork's id and the new page with the artwork's details and the form to bid on that piece of artwork.

** Note: the route (/artworks/:id) is associated with a route declared in a higher-level component (App.js) which routes to the ArtworkDetails component containing the code for the artwork's details and bidding form.

All Artwork URL:

Individual Artwork URL (the artwork selected has id=1):

Wrap Up

Learning about the useHistory hook and .push() methods were vital for my partner and I to successfully build the auction site we had imagined. I hope this blog post was helpful in providing a quick breakdown of the topic and associated example!

Happy Coding!

My partner for this project was:

Rachel HumesFollow

Currently a fulltime software engineer student at Flatiron School.