How to Navigate Programmatically in React with React Router

In React, you can navigate programmatically using the useNavigate hook from React Router. Call the returned function with the target path to change routes without user clicks.

Syntax

Use the useNavigate hook from react-router-dom to get a navigation function. Call this function with a path string to move to that route.

• const navigate = useNavigate(); — gets the navigation function.
• navigate('/path'); — navigates to the specified path.

jsx

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

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

  function goHome() {
    navigate('/home');
  }

  return <button onClick={goHome}>Go Home</button>;
}

Example

This example shows a button that, when clicked, navigates the user to the '/dashboard' route programmatically using useNavigate.

jsx

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

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

  function goToDashboard() {
    navigate('/dashboard');
  }

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

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

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

Output

When the user clicks the 'Go to Dashboard' button on the Home Page, the app navigates to the Dashboard Page showing the heading 'Dashboard Page'.

Common Pitfalls

• Trying to use useNavigate outside of a Router context causes errors.
• Calling navigate without a valid path or with incorrect syntax will not work.
• Using legacy methods like history.push in React Router v6 is outdated; always use useNavigate.

jsx

/* Wrong: Using navigate outside Router */
import { useNavigate } from 'react-router-dom';

function Wrong() {
  const navigate = useNavigate(); // Error if no Router above
  navigate('/home');
  return null;
}

/* Right: Wrap component in Router */
import { BrowserRouter as Router } from 'react-router-dom';

function Right() {
  const navigate = useNavigate();
  navigate('/home');
  return null;
}

export default function App() {
  return (
    <Router>
      <Right />
    </Router>
  );
}

Quick Reference

Summary tips for programmatic navigation in React:

• Always use useNavigate from react-router-dom v6+.
• Wrap your app in a Router component.
• Call navigate('/path') to change routes.
• Use relative or absolute paths as needed.
• For going back, use navigate(-1).

Key Takeaways

Use React Router's useNavigate hook to navigate programmatically in React.

Always ensure your component is inside a Router to use navigation hooks.

Call navigate with a path string to change routes without user clicks.

Avoid legacy navigation methods; use useNavigate for React Router v6 and later.

You can navigate back by calling navigate(-1) to mimic browser back.