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.