Defining routes in React - Mini Project: Build & Apply

Defining Routes in React

📖 Scenario: You are building a simple React app that shows different pages when users click links. You want to set up routes so the app knows which page to show for each URL.

🎯 Goal: Create a React app that uses react-router-dom to define routes for a Home page and an About page. When users visit /, they see the Home page. When they visit /about, they see the About page.

📋 What You'll Learn

Create a React app with functional components

Use react-router-dom for routing

Define routes for / and /about

Render the correct component for each route

💡 Why This Matters

🌍 Real World

Routing is essential in web apps to show different pages without reloading the browser. React Router helps manage this smoothly.

💼 Career

Understanding routing in React is a key skill for frontend developers building single-page applications.

1

Set up basic React components

Create two React functional components called Home and About. Each should return a simple <h1> with text: "Home Page" for Home and "About Page" for About.

React

// Create Home and About components

// Your code here

Need a hint?

Define two functions named Home and About. Each should return an <h1> element with the correct text.

2

Import routing components

Import BrowserRouter, Routes, and Route from react-router-dom at the top of your file.

React

import React from 'react';

function Home() {
  return Home Page;
}

function About() {
  return About Page;
}

// Import BrowserRouter, Routes, Route from react-router-dom below
// Your code here

Need a hint?

Use import { BrowserRouter, Routes, Route } from 'react-router-dom' to get the routing components.

3

Define routes inside BrowserRouter

Create a component called App. Inside it, return <BrowserRouter> with <Routes> inside. Add two <Route> elements: one with path="/" and element=<Home />, and another with path="/about" and element=<About />.

React

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

function Home() {
  return Home Page;
}

function About() {
  return About Page;
}

// Create App component with BrowserRouter, Routes, and Route elements
// Your code here

Need a hint?

Wrap <Routes> inside <BrowserRouter>. Add two <Route> tags with the correct path and element props.

4

Export the App component

Add export default App; at the end of your file to make the App component available for rendering.

React

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

function Home() {
  return Home Page;
}

function About() {
  return About Page;
}

function App() {
  return (
    
      
        } />
        } />
      
    
  );
}

// Export the App component
// Your code here

Need a hint?

Use export default App; to export the component.