11. Introduction to React Router for Navigation

Level: BeginnerDuration: 18m

What is React Router?

React Router is a popular library that lets us add navigation and multiple pages to a React single-page app (SPA) without reloading the browser.

It handles URL changes and displays the correct components for each route.

Installing React Router

bash

npm install react-router-dom

Setting Up Routes

Wrap your app in the `<BrowserRouter>` component and define different routes using `<Routes>` and `<Route>`.

jsx

import { BrowserRouter, Routes, Route } from 'react-router-dom'
import Home from './Home'
import About from './About'

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
      </Routes>
    </BrowserRouter>
  )
}

export default App

Navigating Between Pages

Use the `<Link>` component instead of `<a>` tags so React Router can handle navigation smoothly.

jsx

import { Link } from 'react-router-dom'

function Navbar() {
  return (
    <nav>
      <Link to="/">Home</Link>
      <Link to="/about">About</Link>
    </nav>
  )
}

useNavigate Hook

We can navigate programmatically inside event handlers using the `useNavigate` hook.

jsx

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

function ContactButton() {
  const navigate = useNavigate()

  function goToContact() {
    navigate('/contact')
  }

  return <button onClick={goToContact}>Contact Us</button>
}

Mini Project Step

Add basic navigation to your project by creating two pages: Home and Features. Use React Router to switch between them.

jsx

// App.jsx
import { BrowserRouter, Routes, Route, Link } from 'react-router-dom'
import Home from './Home'
import Features from './Features'

function App() {
  return (
    <BrowserRouter>
      <nav>
        <Link to="/">Home</Link> | <Link to="/features">Features</Link>
      </nav>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/features" element={<Features />} />
      </Routes>
    </BrowserRouter>
  )
}

export default App