How to Use the useNavigate() Hook in React.

Introduction
Navigating between pages is a core part of any React application, and with the introduction of the useNavigate() hook in React Router v6, it has become easier and more efficient. This hook replaces the older useHistory() hook, providing better compatibility and more dynamic navigation capabilities.

In this post, we'll dive into the useNavigate() hook, its benefits, and how you can implement it in your projects with a practical example.

Why Use useNavigate() in React?
The useNavigate() hook provides a programmatic way to manage navigation, making it more intuitive and streamlined. Here's how it shines:

1. Dynamic Redirection: Redirect users programmatically based on conditions.
2. History Management: Control navigation history with options to push new entries or replace the current one.
3. User Interaction Handling: Redirect after events like form submission or button clicks.
4. Enhanced Compatibility: Works seamlessly with React Router v6.

Syntax of useNavigate()

Example:
Implementing useNavigate() in a React Application
Let's create a simple React component where users can navigate between a homepage and a profile page using useNavigate().

Install React Router:

npm install react-router-dom

App.jsx :

// App.js
import React from "react";
import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
import Home from "./Home";
import Profile from "./Profile";

function App() {
  return (
    <Router>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/profile" element={<Profile />} />
      </Routes>
    </Router>
  );
}

export default App;

Home.jsx

// Home.js
import React from "react";
import { useNavigate } from "react-router-dom";

const Home = () => {
  const navigate = useNavigate();

  const handleProfileNavigation = () => {
    // Navigate to the Profile page
    navigate("/profile");
  };

  return (
    <div style={{ textAlign: "center", padding: "20px" }}>
      <h1>Welcome to the Home Page</h1>
      <button
        onClick={handleProfileNavigation}
        style={{ padding: "10px 20px" }}
      >
        Go to Profile
      </button>
    </div>
  );
};

export default Home;

Profile.jsx

// Profile.js
import React from "react";
import { useNavigate } from "react-router-dom";

const Profile = () => {
  const navigate = useNavigate();

  const goBackHome = () => {
    // Navigate back to Home
    navigate("/", { replace: true });
  };

  return (
    <div style={{ textAlign: "center", padding: "20px" }}>
      <h1>Your Profile</h1>
      <button onClick={goBackHome} style={{ padding: "10px 20px" }}>
        Back to Home
      </button>
    </div>
  );
};

export default Profile;

Key Points to Remember
Replace Option: Use { replace: true }to avoid adding an entry in the browser's history stack.
Dynamic Paths: Pass parameters or state objects to the navigate() function for more flexibility.