React Router DOM

Introduction to React Router DOM

Imagine your React app is a magical theme park, and each component is a different ride or attraction. But how do visitors (users) move from one ride to another without getting lost? Enter React Router DOM! It's like the park map that guides visitors smoothly from the Ferris wheel to the roller coaster without them wandering off

Setting Up React Router DOM

First, let’s install React Router DOM in your theme park:

npm install react-router-dom

Now your theme park has the perfect map installed!

Basic Concepts

1.BrowserRouter: This is like the park entrance. It wraps your entire app, so the router knows where to direct visitors.

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

function App() {
  return (
    <BrowserRouter>
      {/* Your park (app) components go here */}
    </BrowserRouter>
  );
}

1. Routes: These are the pathways to different rides (components) in your park. You tell the router where each path leads.

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

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Home />} />  {/* Home ride */}
        <Route path="/rollercoaster" element={<RollerCoaster />} />  {/* RollerCoaster ride */}
        <Route path="/ferriswheel" element={<FerrisWheel />} />  {/* FerrisWheel ride */}
      </Routes>
    </BrowserRouter>
  );
}

• path: The route to your ride.
• element: The component that corresponds to that route.

1. Link: This is the signpost that directs visitors to different rides. It’s like those arrows you see in parks pointing to different attractions.

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

function Navigation() {
  return (
    <nav>
      <Link to="/">Home</Link>  {/* Points to Home */}
      <Link to="/rollercoaster">RollerCoaster</Link>  {/* Points to RollerCoaster */}
      <Link to="/ferriswheel">Ferris Wheel</Link>  {/* Points to FerrisWheel */}
    </nav>
  );
}

Example: The Theme Park in Action

Let’s create a simple theme park app!

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

function App() {
  return (
    <BrowserRouter>
      <h1>Welcome to the React Theme Park!</h1>
      <Navigation />
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/rollercoaster" element={<RollerCoaster />} />
        <Route path="/ferriswheel" element={<FerrisWheel />} />
      </Routes>
    </BrowserRouter>
  );
}

function Home() {
  return <h2>Home: The central plaza of the park!</h2>;
}

function RollerCoaster() {
  return <h2>RollerCoaster: Hold on tight, this ride is wild!</h2>;
}

function FerrisWheel() {
  return <h2>Ferris Wheel: Enjoy the view from up high!</h2>;
}

function Navigation() {
  return (
    <nav>
      <Link to="/">Home</Link>
      <Link to="/rollercoaster">RollerCoaster</Link>
      <Link to="/ferriswheel">Ferris Wheel</Link>
    </nav>
  );
}

export default App;

Summary

• BrowserRouter: The entrance gate that wraps your entire app.
• Routes: The map that shows paths to different rides (components).
• Link: The signposts that help users navigate the park.

Now, with React Router DOM, your app is ready to guide users through all the exciting attractions smoothly! 🎢🎡