Programmatically navigate with React Router using history object

In React Router, you can programmatically navigate to a different route using the history object provided by React Router. Here’s an example of how you can programmatically navigate with React Router.

Programmatically navigate with React Router using history object

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

function MyExampleComponent() {
    const history = useHistory();

    const handleClick = () => {
        // Programmatically navigate to a different route
        history.push('/new-route');
    };

    return (
        <div>
            <button onClick={handleClick}>Go to New Route</button>
        </div>
    );
}

In this example, the useHistory() hook from React Router is used to access the history object. The history.push(‘/new-route’) function is then called to navigate to the ‘/new-route’ route when a button is clicked. This allows you to programmatically navigate within your React application using React Router.

What is React Router ?

React Router is a popular routing library for React applications. It allows you to handle routing in your single-page applications by defining different routes and rendering the appropriate components when the URL matches a specific route. React Router helps in creating a navigable user interface with multiple views.

Hooks

React Router ships with a few hooks that let you access the state of the router and perform navigation from inside your components. Please note: you may need to use React version >= 16.8 in order to use any of these hooks. Please check for more details here.

useHistory
useLocation
useParams
useRouteMatch

The useHistory hook is a hook provided by react-router-dom that gives you access to the history object in React components. The history object allows you to interact with the browser’s history stack, navigate between different URLs, and perform actions like pushing a new entry onto the history stack, replacing the current entry, or going back or forward in the history.

You can use the useHistory hook in functional components to access the history object and perform programmatic navigation within your React application.

For more details on other hooks, please refer React Router Hooks.

The history object

The history object in React Router provides several properties and methods that allow you to interact with the browser’s history stack and navigate between different URLs. Here are some common properties and methods of the history object:

Properties:

length: Represents the number of entries in the history stack.
action: Represents the current action (e.g., PUSH, REPLACE, POP).
location: Represents the current location object.
entries: Represents an array of history entries.

Methods:

push(path, [state]): Pushes a new entry onto the history stack and navigates to the specified path.
replace(path, [state]): Replaces the current entry on the history stack with a new one and navigates to the specified path.
go(n): Moves n entries in the history stack. Negative n goes back, positive n goes forward.
goBack(): Moves back one entry in the history stack.
goForward(): Moves forward one entry in the history stack.

These are some of the common properties and methods of the history object in React Router.

Hope this sneppet is helpful 🙂

You’ll also like:

References:

React Router documentation