From the course: Build Modern Web Apps with React, Hooks, State Management, and APIs Using Vite or Next.js

Unlock this course with a free trial

Join today to access over 25,200 courses taught by industry experts.

useNavigate hook

useNavigate hook

From the course: Build Modern Web Apps with React, Hooks, State Management, and APIs Using Vite or Next.js

Start my 1-month free trial Buy for my team

useNavigate hook

“

Welcome back, in this video we are going to see how we can use the useNavigate hook. The useNavigate hook returns a function that we can call to navigate to a new URL. We have to call that function with the path we want to navigate to. So consider this example, useNavigate hook is being imported. After that, we are getting the useNavigate hook to return a function. In our handleSubmit event, we can check the submission logic, whether the user is successfully authenticated or not. We can hit the backend API to check that. And if we are getting a success call to that, we can redirect the user using the navigate function. It is going to have a string path from where we want to navigate. Otherwise, if this is not true, then we can keep the user on the same component and we can show an error message or an error toast. One thing to note here is that this navigate function, if it is provided a path which is not existent in your main.tsx routes statement, then you are going to see a blank…

Contents