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

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

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

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

Hint

Use export default App; to export the component.

Practice

1. Which component is used to wrap your entire React app to enable routing?

easy

A. Link

B. Route

C. BrowserRouter

D. Routes

Solution

1. Step 1: Understand routing setup

   React Router requires a top-level component to manage routing context.

2. Step 2: Identify the wrapper component

   BrowserRouter wraps the app to enable routing features.

3. Final Answer:

   <BrowserRouter> -> Option C

4. Quick Check:

   Routing wrapper = BrowserRouter [OK]

Hint: Remember: BrowserRouter wraps the whole app for routing [OK]

Common Mistakes:

• Using <Routes> as the top wrapper
• Confusing <Link> with the router wrapper
• Using <Route> to wrap the app

2. Which of the following is the correct syntax to define a route for path '/home' rendering component?

easy

A. } />

B.

C. } />

D. } />

Solution

1. Step 1: Recall Route syntax in React Router v6+

   Routes use path for URL and element for component to render.

2. Step 2: Match correct syntax

   <Route path='/home' element={<Home />} /> uses path='/home' and element={<Home />}, which is correct.

3. Final Answer:

   <Route path='/home' element={<Home />} /> -> Option A

4. Quick Check:

   Route syntax = path + element [OK]

Hint: Use path for URL and element for component in Route [OK]

Common Mistakes:

• Using component instead of element
• Using to instead of path
• Passing component as JSX instead of element prop

3. Given this code snippet, what will be rendered when the URL path is '/about'?

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

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path='/' element={
Home
} />
        <Route path='/about' element={
About Us
} />
        <Route path='/contact' element={
Contact
} />
      </Routes>
    </BrowserRouter>
  );
}

medium

A. Home

B. Nothing renders

C. Contact

D. About Us

Solution

1. Step 1: Match URL path to Route path

   The URL '/about' matches the Route with path='/about'.

2. Step 2: Identify rendered element

   The matched Route renders <h1>About Us</h1>.

3. Final Answer:

   <h1>About Us</h1> -> Option D

4. Quick Check:

   URL '/about' renders About Us [OK]

Hint: Match URL path exactly to Route path to find output [OK]

Common Mistakes:

• Confusing '/' with '/about'
• Assuming default route renders for all paths
• Ignoring exact path matching

4. What is wrong with this route definition?

<Route path='/profile' component={} />

medium

A. The path should be '/profiles' instead of '/profile'

B. The prop 'component' should be 'element' with JSX

C. The component should be passed as a string, not JSX

D. Route cannot have a path prop

Solution

1. Step 1: Recall correct Route props in React Router v6+

   Routes use element prop to pass JSX, not component.

2. Step 2: Identify the error

   Using component causes the route not to render correctly.

3. Final Answer:

   The prop 'component' should be 'element' with JSX -> Option B

4. Quick Check:

   Use element, not component, for Route JSX [OK]

Hint: Use element prop with JSX in Route, not component [OK]

Common Mistakes:

• Using component prop from older React Router versions
• Passing component as string
• Omitting element or component prop

5. You want to create nested routes where '/dashboard' shows a component and '/dashboard/settings' shows inside it. Which is the correct way to define these routes?

hard

A.
}>
} />

B.
} />
} />

C.
}>
} />

D.
}>
} />

Solution

1. Step 1: Understand nested route path rules

   Nested routes use relative paths inside parent Route; child path 'settings' appends to '/dashboard'.

2. Step 2: Check each option for correct nesting

   <Routes> <Route path='/dashboard' element={<Dashboard />}> <Route path='settings' element={<Settings />} /> </Route> </Routes> correctly nests settings as child path without repeating parent path.

3. Final Answer:

   <Routes> <Route path='/dashboard' element={<Dashboard />}> <Route path='settings' element={<Settings />} /> </Route> </Routes> -> Option A

4. Quick Check:

   Nested child paths are relative, no leading slash [OK]

Hint: Nested routes use relative paths without leading slash [OK]

Common Mistakes:

• Using absolute paths in nested routes
• Defining nested routes as siblings
• Repeating parent path in child route