Home > References > Web Development > Reactjs references

How to Programmatically navigate using React router

Last updated : June 4, 2022

This article explains how to navigate the React router programmatically. I have presented examples in react-router-dom v5 and v6.

Programmatic navigation in react-router-dom v6

The react-router-dom V6 useNavigate allows three basic navigation types.
The usage is const navigate = useNavigate()

  1. Navigate to a specific URL.
    navigate("/about")
  2. Navigate to the previous page. That is the equivalent of the browser back button.
    navigate(-1)
  3. Navigate to the next page (in history). That is the equivalent of the browser forward button.
    navigate(1)

Listed below is an example of react-router-dom V6. The example includes both regular routes and programmatic routes.

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

export const App = () => {
  return (
    <BrowserRouter>
    <Routes>
        <Route path="/" element={<Home />} />
        <Route path="about" element={<About />}/>
        <Route path="contact" element={<Contact />} />
    </Routes>
  </BrowserRouter>
  );
}
export default App;

const Home = () =>{
  const navigate = useNavigate();
  const navigateTo = (url: string) => {
    navigate(url)
  }
  return(
          <div>
            <p>Home</p>
            <p><button onClick={() => navigateTo("about")}>Programatically Navigate to About</button></p>
            <p><Link to="/contact">Contact</Link></p>
          </div>
  )
}

const About = () =>{
  const navigate = useNavigate();
  const navigateTo = (url: string) => {
    navigate(url)
  }
  return(
          <div>
            <p>About</p>
            <p><button onClick={() => navigateTo("/")}>Programatically Navigate to Home</button></p>
            <p><Link to="/contact">Contact</Link></p>
          </div>
  )
}

const Contact = () =>{
  const navigate = useNavigate();
  const navigateTo = (url: string) => {
    navigate(url)
  }
  return(
          <div>
            <p>Contact</p>
            <p><Link to="/">Home</Link></p>
            <p><button onClick={() => navigateTo("/about")}>Programatically Navigate to About</button></p>
          </div>
  )
}

Programmatic navigation in react-router-dom v5

The react-router-dom V5 uses useHistory. The useHistory has been replaced with useNavigate in V6. The usage of useHistory is similar to useNavigate.
The usage is const history = useHistory()

  1. Navigate to a specific URL.
    history.push("/about")
  2. Navigate to the previous page. That is the equivalent of the browser back button.
    history.push(-1)
  3. Navigate to the next page (in history). That is the equivalent of the browser forward button.
    history.push(1)

Below is an example of react-router-dom V5. The example includes both regular routes and programmatic routes.

import { Switch , Link, Route, useHistory, BrowserRouter } from "react-router-dom"

export const App = () => {
 
  return (
    <BrowserRouter>
      <Switch>
          <Route path="/"><Home/></Route>
          <Route path="about"><About /></Route>
          <Route path="contact"><Contact /></Route>
      </Switch>
      </BrowserRouter>
  );
}
export default App;

const Home = () =>{
  const history = useHistory();
  function navigateTo(url: string) {
    history.push(url);
  }
  return(
          <div>
            <p>Home</p>
            <p><button onClick={() => navigateTo("about")}>Programatically Navigate to About</button></p>
            <p><Link to="/contact">Contact</Link></p>
          </div>
  )
}

const About = () =>{
  const history = useHistory();
  function navigateTo(url: string) {
    history.push(url);
  }
  return(
          <div>
            <p>About</p>
            <p><button onClick={() => navigateTo("/")}>Programatically Navigate to Home</button></p>
            <p><Link to="/contact">Contact</Link></p>
          </div>
  )
}

const Contact = () =>{
  const history = useHistory();
  function navigateTo(url: string) {
    history.push(url);
  }
  return(
          <div>
            <p>Contact</p>
            <p><Link to="/">Home</Link></p>
            <p><button onClick={() => navigateTo("/about")}>Programatically Navigate to About</button></p>
          </div>
  )
}
Lance
By: Lance
Lance is a software engineer with over 15 years of experience in full-stack software development.
Read more...

Comments are disabled

No Comments