React Router overview - Mini Project: Build & Apply

React Router overview

📖 Scenario: You are building a simple React app that has multiple pages: Home, About, and Contact. You want users to navigate between these pages without the page reloading.

🎯 Goal: Create a React app using React Router to set up navigation between three pages: Home, About, and Contact. The app should display the correct page content when the user clicks the navigation links.

📋 What You'll Learn

Use React Router's BrowserRouter to wrap the app

Create three components: Home, About, and Contact

Set up routes using Routes and Route components

Add navigation links using Link components to switch pages

💡 Why This Matters

🌍 Real World

React Router is used in real websites and apps to create smooth navigation between pages without full page reloads, improving user experience.

💼 Career

Understanding React Router is essential for React developers to build multi-page apps and handle client-side routing efficiently.

1

Set up the page components

Create three React functional components called Home, About, and Contact. Each should return a simple <h2> element with text: "Home Page", "About Page", and "Contact Page" respectively.

React

# Create Home, About, and Contact components

function Home() {
  // Your code here
}

function About() {
  // Your code here
}

function Contact() {
  // Your code here
}

Need a hint?

Each component is a function that returns JSX with an <h2> tag and the page name.

2

Add React Router setup

Import BrowserRouter, Routes, and Route from react-router-dom. Wrap your app's main content inside <BrowserRouter>. Create a component called App that returns <BrowserRouter> with an empty <Routes> inside.

React

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

function Home() {
  return Home Page;
}

function About() {
  return About Page;
}

function Contact() {
  return Contact Page;
}

function App() {
  // Your code here
}

Need a hint?

Wrap your app in <BrowserRouter> and add an empty <Routes> inside.

3

Add routes for each page

Inside the <Routes> component in App, add three <Route> components. Use path="/" for Home, path="/about" for About, and path="/contact" for Contact. Set the element prop to the corresponding component JSX: <Home />, <About />, and <Contact />.

React

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

function Home() {
  return Home Page;
}

function About() {
  return About Page;
}

function Contact() {
  return Contact Page;
}

function App() {
  return (
    
      
        {/* Your code here */}
      
    
  );
}

Need a hint?

Use <Route> with path and element props inside <Routes>.

4

Add navigation links

Import Link from react-router-dom. Inside App, above <Routes>, add a navigation bar with three <Link> components. Set their to props to "/", "/about", and "/contact". The link texts should be "Home", "About", and "Contact". Wrap the links in a <nav> element.

React

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

function Home() {
  return Home Page;
}

function About() {
  return About Page;
}

function Contact() {
  return Contact Page;
}

function App() {
  return (
    
      {/* Your code here */}
      
        } />
        } />
        } />
      
    
  );
}

Need a hint?

Use <Link> inside a <nav> to create clickable navigation links.