How to use the useNavigate hook in React router

Key takeaways:

The useNavigate hook, part of the react-router-dom package, facilitates programmatic navigation within a React application by returning a navigate function.
The useNavigate hook can only be used inside functional components that are nested within a Router instance.
In a typical implementation, useNavigate enables seamless transitions between pages, such as redirecting users based on specific input or user actions.
Effective use of the useNavigate hook enhances user experience by simplifying routing and creating interactive applications.

What is a hook in React?

Hooks are special functions in React that allow you to “hook into” React’s state and life cycle features from functional components. They enable functionalities like managing state, side effects, and context, without needing to use class components. Common hooks include useState for managing state and useEffect for handling side effects.

You can enhance your knowledge regarding React hooks by exploring the “What are React hooks?” Answer.

What is the `useNavigate` hook?

The useNavigate hook is part of the react-router-dom package that allows for programmatic routing inside a React application. This hook returns a function (navigate) that can be invoked with a URIUniversal Resource Identifier to redirect the client to the respective page. However, the hook can only be executed inside a functional component nested inside a Router instance.

If you're new to React, consider reading our detailed blog “A Step-by-Step Guide To Learn React” to get familiar with core concepts like functional components and hooks, which will help you better understand the concepts given in this Answer.

Coding example

The code snippet below demonstrates the use of the useNavigate hook inside a React application.

The example application defines two pages: LoginPage on the / route and HomePage on the /home route inside the index.js file. When the user enters the SECRET_KEY (Educative Rocks!) inside the text box, they are navigated to the HomePage using the useNavigate hook.

The `LoginPage`

Line 1: Imports the useNavigate hook from the react-router-dom package.
Line 3: Defines the SECRET_KEY through which the user can switch to the HomePage.
Line 6: Invokes the useNavigate hook to get the navigate function.
Lines 8–12: Defines the function handleChange that checks whether the user has entered the correct secret key. If so, the navigate function is invoked with the /home path to route the user to the HomePage.
Lines 14–20: Defines the layout of the LoginPage with a heading, some text, and a textbox. The handleChange function is attached to the input, causing it to be invoked whenever the user updates the text inside the text box.

The `HomePage`

Line 1: Imports the useNavigate hook from the react-router-dom package.
Line 4: Invokes the useNavigate hook to get the navigate function.
Lines 6–12: Defines the layout of the HomePage with a heading, some text, and a button to go back to the LoginPage. This is achieved by attaching () => navigate('/') as the onClick method for the button.

Knowledge test

Let’s attempt a short quiz to assess your understanding.

Frequently asked questions

Haven’t found what you were looking for? Contact Us

What is the function of the `useNavigate` hook in a react-router application?

The useNavigate hook in a React Router application allows for programmatic navigation between different routes within the app. It returns a function that can be called with a specific path to navigate to, enabling dynamic routing based on events or user actions, such as form submissions or button clicks.

Why use `useNavigate` instead of `Link`?

useNavigate is used when you need to perform programmatic navigation, such as in response to a condition or event (e.g., after form validation). In contrast, Link is better suited for static links in the UI. useNavigate offers more control for conditional routing scenarios, while Link provides a straightforward way to navigate between predefined routes.

What is the difference between `useNavigate` and `redirect` in React?

useNavigate is used for programmatic navigation within a React component, allowing you to trigger navigation based on logic or events. In contrast, redirect (or the Navigate component in React Router v6) is used declaratively in the component tree to navigate to another route. useNavigate offers more flexibility for dynamic routing, whereas redirect is simpler for predefined route changes.

Can I use `useNavigate in `useEffect`?

Yes, you can use useNavigate inside a useEffect hook in React. This approach is useful when you want to navigate based on a change in state or a side effect, such as redirecting a user after successful form submission or login. However, you should ensure that useEffect dependencies are set correctly to avoid unintended navigation loops.