Day 7 – Routing in React: Creating Multi-Page Applications

Introduction

As applications grow, single-page React apps often need multiple views: dashboards, profiles, settings, or product pages. React Router is the industry-standard solution for handling client-side routing, enabling users to navigate seamlessly without page reloads. For a MERN Stack developer, understanding routing is vital for creating dynamic, user-friendly applications.

CuriosityTech.in emphasizes building real-world MERN applications where routing is integrated from day one. This approach ensures learners not only understand theory but also implement multi-page flows that interact smoothly with backend APIs.

---

What is React Router?

React Router is a library that allows developers to define multiple routes in a React application and map them to specific components. Instead of traditional page reloads, React Router updates the UI dynamically, keeping state and performance intact.

Core Features:

---

Setting Up React Router

1. Install React Router:

npm install react-router-dom

2. Basic Configuration:

import { BrowserRouter as Router, Routes, Route } from ‘react-router-dom’;

import Home from ‘./pages/Home’;

import About from ‘./pages/About’;

function App() {

  return (

    <Router>

      <Routes>

        <Route path=”/” element={<Home />} />

        <Route path=”/about” element={<About />} />

      </Routes>

    </Router>

  );

}

export default App;

---

Hierarchical Diagram – React Routing Structure

This structure allows multiple views while maintaining a single-page application experience.

---

Dynamic Routes & Parameters

Dynamic routing allows pages to receive parameters in the URL, which is crucial for user-specific content:

<Route path=”/profile/:userId” element={<Profile />} />

• Accessing userId in the component:

import { useParams } from ‘react-router-dom’;

const { userId } = useParams();

This enables rendering user-specific data fetched from backend APIs like Node.js and MongoDB.

---

Protected Routes for Authentication

MERN applications often require authentication. You can create protected routes to restrict access:

function ProtectedRoute({ children, isAuth }) {

  return isAuth ? children : <Navigate to=”/login” />;

}

Use case: Only logged-in users can access dashboards or account settings.

---

Best Practices in Routing

1. Nested Routing: Organize child components under parent routes for modularity.
   
2. Lazy Loading Routes: Improve performance by loading components only when needed.
   
3. Centralized Route Config: Maintain a route configuration file for scalability.
   
4. Error Handling: Use * path to show a 404 Not Found page.
   

Table – Routing Methods Comparison:

---

How to Become an Expert in React Routing

CuriosityTech.in provides advanced MERN projects where learners implement routing with authentication, dynamic parameters, and nested layouts, bridging the gap between theoretical knowledge and production-level development.

---

Infographic Suggestion

---

Conclusion

Routing is the backbone of any scalable React application. Mastering React Router ensures smooth navigation, dynamic content rendering, and a professional-grade user experience in MERN Stack projects. Combining this knowledge with hands-on practice and guided projects at CuriosityTech.in equips developers with the expertise to build complex, production-ready applications efficiently.

---