How to Use useNavigate in React for Navigation

In React, use the useNavigate hook from react-router-dom to programmatically change pages. Call const navigate = useNavigate() inside your component, then use navigate('/path') to go to a new route.

Syntax

The useNavigate hook returns a function that lets you change the current page programmatically. You call this function with the path you want to go to.

• const navigate = useNavigate(); — gets the navigation function.
• navigate('/path'); — moves to the specified route.
• You can also pass options like { replace: true } to replace the current entry in history.

javascript

import { useNavigate } from 'react-router-dom';

function MyComponent() {
  const navigate = useNavigate();

  function goToHome() {
    navigate('/home'); // navigates to /home
  }

  return null;
}

Example

This example shows a button that, when clicked, uses useNavigate to go to the '/about' page.

javascript

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

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

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

function About() {
  return <h1>About Page</h1>;
}

export default function App() {
  return (
    <Router>
      <Routes>
        <Route path='/' element={<Home />} />
        <Route path='/about' element={<About />} />
      </Routes>
    </Router>
  );
}

Output

When the app runs, it shows a Home Page with a button labeled 'Go to About'. Clicking the button changes the page to show 'About Page'.

Common Pitfalls

• Calling useNavigate outside a React component or outside a Router causes errors.
• Forgetting to wrap your app in BrowserRouter or another router provider means navigation won't work.
• Using navigate('path') without a leading slash may cause unexpected routing.
• Not handling navigation asynchronously if needed can cause UI glitches.

javascript

/* Wrong: useNavigate called outside component */
const navigate = useNavigate(); // ❌ This will cause an error

/* Right: useNavigate inside component */
function MyComponent() {
  const navigate = useNavigate(); // ✅ Correct
  // ...
}

Quick Reference

Usage	Description
const navigate = useNavigate();	Get the navigate function inside a component
navigate('/path');	Go to the specified route
navigate('/path', { replace: true });	Navigate and replace current history entry
navigate(-1);	Go back one page in history
navigate(1);	Go forward one page in history

Key Takeaways

Always call useNavigate inside a React component wrapped by a Router.

Use the navigate function to change routes programmatically with a path string.

Pass { replace: true } to navigate to replace history instead of pushing.

Ensure your app is wrapped in BrowserRouter or another router provider.

Use relative or absolute paths carefully to avoid routing errors.