Navigating with useNavigate

Navigating with useNavigate in React (React Router v6+)

In React Router v6+, useNavigate is a hook that provides a programmatic way to navigate to different routes. This hook allows you to perform navigation without relying on anchor links or buttons. It’s especially useful for redirecting the user after a form submission, a successful action, or in any situation where you need to change the route programmatically.

What is useNavigate?

useNavigate is a React Router hook that returns a function (navigate) which can be used to change the current route. This is the primary way to programmatically navigate between pages in React Router v6+.

Basic Usage of useNavigate

1. Setup and Importing: To use useNavigate, you need to import it from react-router-dom.
2. Usage: Once you call useNavigate, it gives you a navigate function that you can call with the path or route you want to navigate to.

Example: Basic Navigation with useNavigate

import React from 'react';
import { BrowserRouter as Router, Routes, Route, Link, useNavigate } from 'react-router-dom';

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

  const handleButtonClick = () => {
    navigate('/about'); // Navigate to the "About" page when the button is clicked
  };

  return (
    <div>
      <h1>Home Page</h1>
      <button onClick={handleButtonClick}>Go to About Page</button>
    </div>
  );
};

const AboutPage = () => {
  return <h1>About Page</h1>;
};

const App = () => {
  return (
    <Router>
      <Routes>
        <Route path="/" element={<HomePage />} />
        <Route path="/about" element={<AboutPage />} />
      </Routes>
    </Router>
  );
};

export default App;

Explanation:

• useNavigate(): Inside the HomePage, useNavigate returns a navigate function, which is used to programmatically navigate to the “About” page when the button is clicked.
• navigate('/about'): The navigate function is called with the path of the route you want to navigate to.

---

Navigating with Relative Paths

You can also navigate relative to the current route using useNavigate. This is useful when you want to navigate based on the current URL without specifying an absolute path.

import React from 'react';
import { BrowserRouter as Router, Routes, Route, Link, useNavigate } from 'react-router-dom';

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

  const handleNavigateForward = () => {
    navigate('./about'); // Navigate relative to the current path
  };

  return (
    <div>
      <h1>Home Page</h1>
      <button onClick={handleNavigateForward}>Go to About Page</button>
    </div>
  );
};

const AboutPage = () => {
  return <h1>About Page</h1>;
};

const App = () => {
  return (
    <Router>
      <Routes>
        <Route path="/" element={<HomePage />} />
        <Route path="/about" element={<AboutPage />} />
      </Routes>
    </Router>
  );
};

export default App;

Explanation:

• Relative Navigation: The navigate('./about') navigates relative to the current route. This is helpful when working with nested routes or if you want to navigate relative to the current location.

---

Passing State with Navigation

In addition to navigating to a new route, you can also pass state to the target route, which is helpful when you want to pass data (such as after a form submission) to the destination route.

import React from 'react';
import { BrowserRouter as Router, Routes, Route, Link, useNavigate, useLocation } from 'react-router-dom';

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

  const handleNavigateWithState = () => {
    navigate('/about', { state: { message: 'Hello from Home Page!' } });
  };

  return (
    <div>
      <h1>Home Page</h1>
      <button onClick={handleNavigateWithState}>Go to About Page with Message</button>
    </div>
  );
};

const AboutPage = () => {
  const location = useLocation();
  const message = location.state?.message || 'No message';

  return <h1>About Page - Message: {message}</h1>;
};

const App = () => {
  return (
    <Router>
      <Routes>
        <Route path="/" element={<HomePage />} />
        <Route path="/about" element={<AboutPage />} />
      </Routes>
    </Router>
  );
};

export default App;

Explanation:

• Passing State: When navigating to the /about route, we pass a state object with a message property. This state is accessible in the AboutPage through useLocation().
• useLocation(): This hook allows you to access the location object, which contains information about the current route, including the passed state.

---

Replacing Current History Entry

Sometimes you might want to navigate to a new route but replace the current entry in the browser’s history stack (e.g., after a form submission, so the user can’t go back to the previous page). You can do this by passing an options object with { replace: true } to the navigate function.

import React from 'react';
import { BrowserRouter as Router, Routes, Route, Link, useNavigate } from 'react-router-dom';

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

  const handleFormSubmit = () => {
    // After form submission, navigate and replace the current history entry
    navigate('/about', { replace: true });
  };

  return (
    <div>
      <h1>Home Page</h1>
      <button onClick={handleFormSubmit}>Submit Form and Go to About</button>
    </div>
  );
};

const AboutPage = () => {
  return <h1>About Page</h1>;
};

const App = () => {
  return (
    <Router>
      <Routes>
        <Route path="/" element={<HomePage />} />
        <Route path="/about" element={<AboutPage />} />
      </Routes>
    </Router>
  );
};

export default App;

Explanation:

• replace: true: This option replaces the current entry in the history stack, so when the user clicks the “back” button, they don’t go back to the form submission page.

---

Navigating with a Specific Action (Back, Forward, etc.)

useNavigate also allows you to perform actions like going back or forward in the browser’s history stack.

import React from 'react';
import { BrowserRouter as Router, Routes, Route, Link, useNavigate } from 'react-router-dom';

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

  const goBack = () => {
    navigate(-1); // Go back in history
  };

  const goForward = () => {
    navigate(1); // Go forward in history
  };

  return (
    <div>
      <h1>Home Page</h1>
      <button onClick={goBack}>Go Back</button>
      <button onClick={goForward}>Go Forward</button>
    </div>
  );
};

const AboutPage = () => {
  return <h1>About Page</h1>;
};

const App = () => {
  return (
    <Router>
      <Routes>
        <Route path="/" element={<HomePage />} />
        <Route path="/about" element={<AboutPage />} />
      </Routes>
    </Router>
  );
};

export default App;

Explanation:

• navigate(-1): This command goes back one step in the browser’s history.
• navigate(1): This command goes forward one step in the browser’s history.

---