ReactJS – Programmatic Navigation | React Tutorial

📌 What is Programmatic Navigation?

Navigating Programmatically Using React Router

Programmatic navigation means changing routes using code instead of links. For example, using navigate('/home') inside a function to go to the Home page after a button click or form submission.

This makes navigation dynamic and event-driven, useful in many real-world apps.

📌 Objectives

Navigation on button click
Navigation inside event handler
Navigation to multiple pages with single event handler
Condition based navigation
Go Back Button

➡️ Navigation on Button Click

We can use useNavigate() from react-router-dom and call it inside a button's onClick event.

React Playground

import React from 'react'
import { Route, Routes, useNavigate } from 'react-router-dom'
import Home from './Home.jsx'
import About from './About.jsx'
import Contact from './Contact.jsx'
import Navbar from './Navbar.jsx'

const App = () => {
  const navigate = useNavigate();
  return (
    <>
      <Navbar/>
      <Routes>
        <Route path='/' element={<Home/>}/>
        <Route path='/about' element={<About/>}/>
        <Route path='/contact' element={<Contact/>}/>
      </Routes>
      <button onClick={() => navigate('/')}>Home</button>
      <button onClick={() => navigate('/about')}>About</button>
      <button onClick={() => navigate('/contact')}>Contact</button>
    </>
  )
}
export default App

Open Sandbox

⚙️ Navigation inside Event Handler

We can define navigation logic inside functions and reuse them across multiple buttons.

React Playground

import React from 'react'
import { Route, Routes, useNavigate } from 'react-router-dom'
import Home from './Home.jsx'
import About from './About.jsx'
import Contact from './Contact.jsx'
import Navbar from './Navbar.jsx'

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

  const navigateHome = () => navigate('/');
  const navigateAbout = () => navigate('/about');
  const navigateContact = () => navigate('/contact');
  
  return (
    <>
      <Navbar/>
      <Routes>
        <Route path='/' element={<Home/>}/>
        <Route path='/about' element={<About/>}/>
        <Route path='/contact' element={<Contact/>}/>
      </Routes>
      <button onClick={navigateHome}>Home</button>
      <button onClick={navigateAbout}>About</button>
      <button onClick={navigateContact}>Contact</button>
    </>
  )
}
export default App

Open Sandbox

🔗 Navigation to Multiple Pages with Single Handler

We can create a reusable function that accepts a url argument and navigates accordingly.

React Playground

import React from 'react'
import { Route, Routes, useNavigate } from 'react-router-dom'
import Home from './Home.jsx'
import About from './About.jsx'
import Contact from './Contact.jsx'
import Navbar from './Navbar.jsx'

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

  const navigateToAll = (url) => {
    navigate(url);
  } 
  
  return (
    <>
      <Navbar/>
      <Routes>
        <Route path='/' element={<Home/>}/>
        <Route path='/about' element={<About/>}/>
        <Route path='/contact' element={<Contact/>}/>
      </Routes>
      <button onClick={() => navigateToAll('/')}>Home</button>
      <button onClick={() => navigateToAll('/about')}>About</button>
      <button onClick={() => navigateToAll('/contact')}>Contact</button>
    </>
  )
}
export default App

Open Sandbox

⚖️ Condition Based Navigation

We can use conditions to decide which route to navigate to.

React Playground

import React from 'react'
import { Route, Routes, useNavigate } from 'react-router-dom'
import Home from './Home.jsx'
import About from './About.jsx'
import Contact from './Contact.jsx'
import Navbar from './Navbar.jsx'

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

  const navigateToAll = () => {
    let name = "Raj";
    if(name === "Rajesh"){
      navigate("/about");
    } else {
      navigate("/contact");
    }
  } 
  
  return (
    <>
      <Navbar/>
      <Routes>
        <Route path='/' element={<Home/>}/>
        <Route path='/about' element={<About/>}/>
        <Route path='/contact' element={<Contact/>}/>
      </Routes>
      <button onClick={navigateToAll}>Click Me</button>
    </>
  )
}
export default App

Open Sandbox

↩️ Go Back Button

React Router also allows navigating back using navigate(-1).

React Playground

import React from 'react'
import { Route, Routes, useNavigate } from 'react-router-dom'
import Home from './Home.jsx'
import About from './About.jsx'
import Contact from './Contact.jsx'
import Navbar from './Navbar.jsx'

const App = () => {
  const navigate = useNavigate();
  
  const navigateToAll = () =>{
    let name = "Raj";
    if(name === "Rajesh"){
      navigate("/about");
    }else{
      navigate("/contact");
    }
  } 
  
  return (
    <>
    <Navbar/>
    <Routes>
      <Route path='/' element={<Home/>}/>
      <Route path='/about' element={<About/>}/>
      <Route path='/contact' element={<Contact/>}/>
    </Routes>
    <button onClick={navigateToAll}>Click Me</button>
    <button onClick={()=>navigate(-1)}>Go Back</button>
    </>
  )
}

export default App

Open Sandbox

react

Nearby lessons