Programmatically Navigate Using React Router

#react #webdev

Do you want to redirect a user to another page when a certain event like a button click happens?
Are you using react-router in your application for handling routing?
Then in this article, we will see how to navigate programmatically using react-router.

Project setup

Create a new react project using the following command:

npx create-react-app react-router-programmatic-routing

Now install react-router-dom and history packages:

npm i react-router-dom history

In index.js, wrap the App component with BrowserRouter:

import React from "react"
import ReactDOM from "react-dom/client"
import "./index.css"
import App from "./App"

import { BrowserRouter } from "react-router-dom"

const root = ReactDOM.createRoot(document.getElementById("root"))
root.render(
  <React.StrictMode>
    <BrowserRouter>
      <App />
    </BrowserRouter>
  </React.StrictMode>
)

In App.js create a couple of routes one for the home and another for the dashboard:

import { Link, Route, Routes } from "react-router-dom"

function App() {
  return (
    <div className="App">
      <nav>
        <ul>
          <li>
            <Link to="/">Home</Link>
          </li>
        </ul>
      </nav>
      <Routes>
        <Route path="/" element={<Home />}></Route>
        <Route path="dashboard" element={<Dashboard />}></Route>
      </Routes>
    </div>
  )
}

function Home() {
  return <button>Go to dashboard</button>
}

function Dashboard() {
  return <div>Dashboard</div>
}

export default App

Navigating when the button is clicked

We can use the useNavigate hook
from react-router to navigate to the dashboard when the button is clicked.

import { Link, Route, Routes } from "react-router-dom"
import { useNavigate } from "react-router-dom"

function App() {
  return (
    <div className="App">
      <nav>
        <ul>
          <li>
            <Link to="/">Home</Link>
          </li>
        </ul>
      </nav>
      <Routes>
        <Route path="/" element={<Home />}></Route>
        <Route path="dashboard" element={<Dashboard />}></Route>
      </Routes>
    </div>
  )
}

function Home() {
  const navigate = useNavigate()

  return (
    <button
      onClick={() => {
        navigate("/dashboard")
      }}
    >
      Go to dashboard
    </button>
  )
}

function Dashboard() {
  return <div>Dashboard</div>
}

export default App