Why Defining routes in React? - Purpose & Use Cases

The Big Idea

What if your app could switch pages instantly without you writing complex URL checks?

The Scenario

Imagine building a website where you manually show and hide different page content by writing lots of if-else checks for URLs.

Every time a user clicks a link, you have to write code to detect the URL and then update the page content yourself.

The Problem

This manual way is slow and messy. You must write repetitive code for each page, and it's easy to make mistakes.

It's hard to keep track of all the URLs and what content to show, especially as your site grows.

The Solution

Defining routes lets you map URLs to components in a clear, organized way.

React routing libraries automatically handle showing the right page when the URL changes, so you don't have to write that logic yourself.

Before vs After

✗ Before

if (window.location.pathname === '/home') { showHome(); } else if (window.location.pathname === '/about') { showAbout(); }

✓ After

<Route path='/home' element={<Home />} />
<Route path='/about' element={<About />} />

What It Enables

You can build multi-page apps that feel smooth and fast, with clean code that's easy to manage and update.

Real Life Example

Think of a shopping website where clicking 'Products' or 'Cart' changes the page without reloading the whole site, thanks to defined routes.

Key Takeaways

Manual URL checks are hard to maintain and error-prone.

Defining routes maps URLs to components automatically.

This makes building and scaling web apps easier and cleaner.

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