Master History Push in React Router: Quick Guide

Struggling with navigation in React apps?

Managing routes in a React project can get tricky, especially when you need to handle navigation between components smoothly. That’s where programmatic navigation in React Router comes in. It lets you control navigation dynamically, making it easier to guide users through your app.

In this blog, we'll break down how navigation works in React Router. We’ll walk through practical examples and show you how to use tools like the useNavigate hook, location object, and navigation stack to handle routing effectively.

Let’s make navigating your app simple and smooth!

What is History Push in React Router?

The history push functionality allows you to programmatically change the route path, trigger page navigation, and manage the history stack. It’s a way to manipulate the browser history and control how users navigate through different views of your application. By using the history object and React Router's useHistory hook, developers can push a new entry into the history stack and transition between routes.

Understanding how history push operates can significantly improve the user experience, allowing for smooth transitions without reloading the entire page. In React Router, the history object plays a key role in this process, and its methods help manipulate browser history and location objects.

Understanding the History Object and Router History

Before diving into examples, it’s essential to understand the history object and how it interacts with React Router.

The history object tracks the user’s navigation history and is used to manipulate the history stack. This stack maintains the sequence of visited pages, allowing the browser to track the user's movement between routes.

React Router uses the history instance to manage this stack, and developers can modify it by pushing or replacing routes. You can achieve this programmatically using the history.push() method, which pushes a new history entry to the history stack.

1// Example of pushing a new entry into the history stack using history.push()
2const history = useHistory();
3history.push('/new-path');

​

This simple line of code tells React Router to add a new route path to the history stack, navigating the user to /new-path without reloading the page.

The Role of Location Object and Path Patterns

The location object in React Router contains information about the current route path, URL parameters, and location state. It represents the current URL, and you can access it using the location prop or useLocation hook. The location object also contains details like the search string and hash fragment state, which are part of the URL query string hash.

In the following example, we show how the location object provides access to the current route and URL query string:

1import { useLocation } from 'react-router-dom';
2
3const CurrentLocation = () => {
4  const location = useLocation();
5  return <div>Current Path: {location.pathname}</div>;
6};

​

When the history object is updated via history push, the location object reflects these changes, allowing developers to access the new route path and current location.

Working with Route Components and Route Props

React Router enables us to define route components that render based on the route path matching the current URL. These components receive route props that include the match object, location object, and history object. The match object contains details about the matched portion of the URL and any URL parameters that may be part of the path.

Here’s an example demonstrating the use of route props in a React Router route component:

1import { Route } from 'react-router-dom';
2
3const MyComponent = ({ match, location, history }) => {
4  return (
5    <div>
6      <h3>Matched Path: {match.path}</h3>
7      <p>Current Location: {location.pathname}</p>
8      <button onClick={() => history.push('/new-path')}>Go to new path</button>
9    </div>
10  );
11};
12
13<Route path="/:id" component={MyComponent} />

​

In this example, the route component receives route props, which include the match object, location object, and history object. These props are used to render dynamic content based on the current URL parameters and allow programmatic navigation with history.push().

Managing Browser History with Hash and Memory History

React Router allows you to use different types of history instances: hash history and memory history. Understanding these different types of histories can help you decide the best approach for managing browser history in your application.

Hash History

With hash history, the URL is manipulated by changing the portion of the URL hash. This is useful for single-page applications (SPAs) where the browser doesn’t need to reload when navigating between views. React Router's hash history is ideal for applications that need to work with legacy browsers or support routing without server-side configuration.

1import { HashRouter } from 'react-router-dom';
2
3<HashRouter>
4  <App />
5</HashRouter>

​

Memory History

In some scenarios, you may want to manage the history stack without interacting with the browser history. This can be achieved using memory history. Memory history is particularly useful for testing or when you don't want to modify the browser’s address bar.

1import { Router } from 'react-router-dom';
2import { createMemoryHistory } from 'history';
3
4const history = createMemoryHistory();
5
6<Router history={history}>
7  <App />
8</Router>

​

The UseHistory Hook: Programmatic Navigation

React Router offers the useHistory hook, which gives you access to the history instance for programmatic navigation. By calling history.push() within a component, you can navigate to a new route path without manually changing the URL query string.

1import { useHistory } from 'react-router-dom';
2
3const NavigateButton = () => {
4  const history = useHistory();
5
6  const handleClick = () => {
7    history.push('/new-path');
8  };
9
10  return <button onClick={handleClick}>Go to new path</button>;
11};

​

By calling history.push('/new-path'), the user is taken to the new path, and the history stack is updated. This enables smooth navigation and ensures that the current URL is always in sync with the application’s state.

Handling Query Parameters and Location State

When navigating programmatically, you can also pass query parameters and location state alongside the new route path. This is useful when you want to maintain state between different routes or include specific URL search data.

Here’s how to pass query parameters and location state using history.push():

1const history = useHistory();
2
3const navigateWithQueryParams = () => {
4  history.push({
5    pathname: '/new-path',
6    search: '?page=2',
7    state: { referrer: 'home' }
8  });
9};

​

In this example, the search string is used to include query parameters, and the state object carries additional state data to the next route component.

Wrapping Up: Mastering History Push in React Router

Understanding history push in React Router makes navigating web apps easier and more responsive. By learning how to work with the history stack, the location object, and programmatic navigation, developers can create smoother user experiences.

From hash history to memory history and the useHistory hook, knowing how history push works helps improve app navigation. With these insights, building responsive and intuitive routing in React becomes much more manageable.

Short on time? Speed things up with DhiWise!

Tired of manually designing screens, coding on weekends, and technical debt? Let DhiWise handle it for you!

You can build an e-commerce store, healthcare app, portfolio, blogging website, social media or admin panel right away. Use our library of 40+ pre-built free templates to create your first application using DhiWise.