This content originally appeared on DEV Community and was authored by Kazutora Hattori
Introduction
react-router-dom's useNavigate is a useful tool for implementing page transitions in React.
It's often used in cases like "navigating to another page when a button is pressed" or "dynamically switching pages using an input ID."
This article clearly explains the basic usage of navigate and how to combine it with forms and input values.
Preparation
1.First, obtain the function with useNavigate.
import { useNavigate } from "react-router-dom";
const navigate = useNavigate();
2.Navigate to a fixed page
To navigate to a specific route, simply pass a string.
navigate("/cards/register"); // Navigate to the new registration page
3.Passing values dynamically
Using template literals, you can embed input values in the URL.
const onSubmit = (data: any) => {
navigate(`/cards/${data.userId}`);
// Example: If userId is "hello", navigate to /cards/hello
};
Summary
useNavigate → Get the function
navigate("/path") → Navigate to the page
navigate(/cards/${data.userId}) → Dynamically navigate using the input value
This content originally appeared on DEV Community and was authored by Kazutora Hattori
Kazutora Hattori | Sciencx (2025-09-27T08:39:45+00:00) How to use useNavigate to transition from a button in React. Retrieved from https://www.scien.cx/2025/09/27/how-to-use-usenavigate-to-transition-from-a-button-in-react/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.