Defining routes in React - Step-by-Step Execution

Concept Flow - Defining routes

Start App

↓

Define Routes

↓

User visits URL

↓

Router matches URL to Route

↓

Render matched Component

↓

Display Component on screen

The app starts by defining routes. When a user visits a URL, the router matches it to a route and renders the correct component.

Execution Sample

React

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

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

export default App;

This code sets up two routes: '/' renders Home component, '/about' renders About component.

Execution Table

Step	User URL	Router Action	Matched Route	Component Rendered
1	/	Check routes	path='/'	Home
2	/about	Check routes	path='/about'	About
3	/contact	Check routes	No match	No component (404 or fallback)
4	Exit	No more URLs	-	-

💡 No more URLs to match, routing ends

Variable Tracker

Variable	Start	After Step 1	After Step 2	After Step 3	Final
User URL	''	'/'	'/about'	'/contact'	No more URLs
Matched Route	null	'/'	'/about'	null	null
Component Rendered	null	Home	About	No component (404 or fallback)	No component (404 or fallback)

Key Moments - 2 Insights

Why does the router render no component for '/contact'?

Because '/contact' does not match any defined route path, so no component is rendered as shown in execution_table row 3.

How does the router decide which component to render?

It compares the user URL with each route's path and renders the component of the first matching route, as seen in execution_table rows 1 and 2.

Visual Quiz - 3 Questions

Look at the execution table, what component is rendered when the user visits '/'?

A Home

B About

C Contact

D None

💡 Hint

Check execution_table row 1 under 'Component Rendered'

At which step does the router find no matching route?

A Step 1

B Step 3

C Step 2

D Step 4

💡 Hint

Look at execution_table row 3 under 'Matched Route'

If we add a route for '/contact', how would the component rendered change at step 3?

A It would render Home

B It would render About

C It would render Contact component

D It would still render no component

💡 Hint

Refer to variable_tracker for 'Component Rendered' at step 3 and imagine adding a matching route

Concept Snapshot

Defining routes in React uses <BrowserRouter> to wrap <Routes>.
Inside <Routes>, each <Route> has a path and an element (component).
When user visits a URL, router matches path and renders the element.
No match means no component rendered (can show 404).
Routes must be inside <BrowserRouter> for routing to work.

Full Transcript

This visual execution shows how React routing works by defining routes inside BrowserRouter. When the app starts, routes are set with paths and components. When a user visits a URL, the router checks each route to find a match. If a match is found, it renders the corresponding component. If no match is found, no component is rendered. The execution table traces user URLs and router actions step-by-step. Variable tracker shows how user URL, matched route, and rendered component change over time. Key moments clarify why no component renders for unmatched URLs and how matching works. The quiz tests understanding of route matching and rendering behavior.

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