Forem: Prajesh Prajapati

Private (Protected) and Public Routes in React Router v6 – with Real-Time MERN Stack Example

Prajesh Prajapati — Sat, 05 Jul 2025 06:47:39 +0000

When building modern web applications with the MERN stack (MongoDB, Express.js, React, Node.js), you often need to differentiate between pages that anyone can access (Public Routes) and those that require user authentication (Private or Protected Routes).

This post explains everything step-by-step, including real-time examples and code to help you implement it properly.

1. Real-Time Use Case Scenario

Imagine you're building a sports e-commerce website. Here's a simplified route structure:

Public Routes:

/ → Home Page
/login → Login Page
/register → Register Page
/shop → View all products
/product/:id → Product details

Private (Protected) Routes:

/cart → Only for logged-in users
/wishlist → Only for logged-in users
/dashboard → User’s personal area
/admin → Admin-only section

We want to prevent unauthenticated users from accessing /cart, /wishlist, or /dashboard.

2. Folder Structure (Client-Side)

/src
  /pages
    Home.tsx
    Login.tsx
    Register.tsx
    Cart.tsx
    Wishlist.tsx
    Dashboard.tsx
  /components
    PrivateRoute.tsx
  /App.tsx

3. Setting Up React Router v6 in `App.tsx`

import { BrowserRouter, Routes, Route } from "react-router-dom";
import Home from "./pages/Home";
import Login from "./pages/Login";
import Register from "./pages/Register";
import Cart from "./pages/Cart";
import Wishlist from "./pages/Wishlist";
import Dashboard from "./pages/Dashboard";
import PrivateRoute from "./components/PrivateRoute";

function App() {
  return (
    <BrowserRouter>
      <Routes>
        {/* Public Routes */}
        <Route path="/" element={<Home />} />
        <Route path="/login" element={<Login />} />
        <Route path="/register" element={<Register />} />

        {/* Private Routes */}
        <Route element={<PrivateRoute />}>
          <Route path="/cart" element={<Cart />} />
          <Route path="/wishlist" element={<Wishlist />} />
          <Route path="/dashboard" element={<Dashboard />} />
        </Route>
      </Routes>
    </BrowserRouter>
  );
}

export default App;

4. Creating the `PrivateRoute` Component

React Router v6 no longer uses render or component props. Instead, we use the Outlet component to wrap child routes.

PrivateRoute.tsx:

import { Navigate, Outlet } from "react-router-dom";

const PrivateRoute = () => {
  const token = localStorage.getItem("token");

  return token ? <Outlet /> : <Navigate to="/login" />;
};

export default PrivateRoute;

Explanation:

If token exists, the user is considered authenticated and can access child routes (cart, wishlist, etc.).
If not, they are redirected to /login.

5. Example Login Flow (Client + Server Integration)

Backend: `POST /api/login`

Validates user credentials
Returns a JWT token if successful

Frontend Login Submit Example:

const handleLogin = async () => {
  const response = await fetch("http://localhost:5000/api/login", {
    method: "POST",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify({ email, password }),
  });

  const data = await response.json();
  if (data.token) {
    localStorage.setItem("token", data.token);
    navigate("/dashboard");
  } else {
    alert("Invalid credentials");
  }
};

6. Backend Middleware for Token Validation

authMiddleware.js:

const jwt = require("jsonwebtoken");

const authMiddleware = (req, res, next) => {
  const token = req.headers.authorization?.split(" ")[1];

  if (!token) {
    return res.status(401).json({ message: "Access Denied: No Token" });
  }

  try {
    const verified = jwt.verify(token, process.env.JWT_SECRET);
    req.user = verified;
    next();
  } catch (err) {
    res.status(401).json({ message: "Invalid Token" });
  }
};

module.exports = authMiddleware;

Usage in Routes (Express.js):

const auth = require("./middleware/authMiddleware");

router.get("/user/cart", auth, (req, res) => {
  // only logged-in users can access this
});

7. Axios Setup to Send Token Automatically (Frontend)

import axios from "axios";

axios.defaults.baseURL = "http://localhost:5000/api";

axios.interceptors.request.use((config) => {
  const token = localStorage.getItem("token");
  if (token) {
    config.headers.Authorization = `Bearer ${token}`;
  }
  return config;
});

8. Optional: Logout Functionality

const handleLogout = () => {
  localStorage.removeItem("token");
  navigate("/login");
};

9. Summary Table

Route	Type	Access Condition	Redirect If Not Logged In
`/`	Public	Always available	-
`/login`	Public	Always available	-
`/cart`	Private	Requires token	Redirect to `/login`
`/dashboard`	Private	Requires token	Redirect to `/login`
`/admin`	Private	Requires token + admin role	Redirect or deny access

10. Final Thought

Implementing Public and Private routes in React Router v6 is critical for security, user experience, and clean app architecture. In a MERN stack app, this approach ensures your frontend is aligned with your backend authentication.

When done correctly, you:

Prevent unauthorized access
Improve security
Maintain clean separation between user roles and route access

Use this structure as a base to expand into features like role-based routes, session expiration, or even token refresh strategies.

My React App Was Slow Until I Did This: Performance Tips for MERN Stack Developers

Prajesh Prajapati — Sun, 22 Jun 2025 06:47:25 +0000

🐢 My React App Was Slow Until I Did This…

Performance Optimization Tips for MERN Stack Developers

“Why is my React app so slow?”

That was me — frustrated with lag, excessive renders, and sluggish performance. As a MERN stack developer, I was so focused on features that I overlooked performance. Let me walk you through 8 concrete steps I took to speed up my app — from React tweaks to MongoDB query optimizations.

🚀 My Stack Setup

I built a full-stack task management app using:

🧠 MongoDB + Mongoose (Database)
🚪 Express.js (REST API)
⚛️ React + Redux (Frontend)
⚙️ Node.js (Server runtime)

Once the project grew to multiple components, filters, and interactions — it became noticeably slower. That’s when I dug into performance optimization.

🛠️ Step 1: Identify Rendering Bottlenecks

The first step is always profiling your app.

✅ What I Did:

I opened Chrome DevTools → Performance Tab and recorded interactions like page load, filtering, and typing in a search box.

❌ What I Found:

Components were re-rendering excessively, even when props didn’t change.
Expensive calculations were running on every render.

💡 The Fix: Use `React.memo` and `useMemo`

// ✅ Prevents re-render if props are unchanged
const TaskItem = React.memo(({ task }) => {
  return <li>{task.title}</li>;
});

// ✅ Memoize derived values (expensive calculations)
const highPriorityTasks = useMemo(() => {
  return tasks.filter(task => task.priority === "high");
}, [tasks]);

🔄 This drastically reduced re-renders and improved interaction speed.

🧠 Step 2: Avoid Anonymous Functions in JSX

Every render creates a new function instance, which triggers re-renders in child components.

❌ Problem:

<button onClick={() => handleClick(task.id)}>Delete</button>

✅ Solution:

Use useCallback to memoize functions:

const handleDelete = useCallback((id) => {
  // delete logic
}, []);

<button onClick={() => handleDelete(task.id)}>Delete</button>

🔁 Now handleDelete has a stable reference and won't trigger unnecessary re-renders.

🐢 Step 3: Lazy Load Heavy Components

Don't load everything at once — lazy load pages and heavy components.

import { lazy, Suspense } from "react";

const TaskDetails = lazy(() => import("./TaskDetails"));

<Suspense fallback={<div>Loading...</div>}>
  <TaskDetails />
</Suspense>

This reduced my initial bundle size significantly.

🧭 Step 4: Code Splitting with React Router

If you're using react-router-dom, code-split your routes:

const Dashboard = lazy(() => import("./pages/Dashboard"));
const Settings = lazy(() => import("./pages/Settings"));

<Routes>
  <Route path="/dashboard" element={<Dashboard />} />
  <Route path="/settings" element={<Settings />} />
</Routes>

🧳 This defers route components until needed, speeding up your homepage.

🧱 Step 5: Normalize Redux/Context State

I initially had deeply nested objects, which caused re-renders and slow updates.

❌ Anti-pattern:

{
  users: [
    {
      id: 1,
      name: "Alice",
      tasks: [{ id: 1, title: "Fix bug" }]
    }
  ]
}

✅ Best practice:

{
  users: {
    1: { id: 1, name: "Alice" }
  },
  tasks: {
    1: { id: 1, title: "Fix bug", userId: 1 }
  }
}

📦 Use Redux Toolkit to manage normalized state.

🔑 Step 6: Use Stable Keys in Lists

Always provide unique and stable keys when rendering lists.

{tasks.map(task => (
  <TaskItem key={task._id} task={task} />
))}

🔄 This helps React efficiently update only the changed DOM nodes.

🔍 Step 7: Debounce Input/API Calls

When I implemented search, I was firing API requests on every keystroke.

❌ Bad:

<input onChange={(e) => searchTasks(e.target.value)} />

✅ Good: Debounce the input

import { debounce } from 'lodash';

const debouncedSearch = useMemo(() =>
  debounce((query) => searchTasks(query), 500), []);

<input onChange={(e) => debouncedSearch(e.target.value)} />

🔄 This reduced unnecessary API calls, improving both frontend and backend performance.

📡 Step 8: Optimize MongoDB Queries

Turns out, not all slowness is caused by React — sometimes your API is slow.

✅ What I Fixed:

Added indexes to MongoDB collections
Used .lean() for read queries to skip Mongoose overhead
Avoided large $or and $in queries without indexes

const tasks = await Task.find({ status: 'active' }).lean();

🎯 Queries became 2–3x faster, which made frontend responses instant.

📊 Results: Before vs After

Metric	Before Optimization	After Optimization
Initial Load Time	~6.5 sec	~2.4 sec
Average Component Renders	~500+	<100
Search API Calls per second	15–20	~2
React Memory Usage	High	Normal

🧠 Final Takeaways

Performance in a MERN app isn't magic — it's a series of small, intentional improvements:

🚫 Avoid unnecessary re-renders with React.memo, useCallback, and useMemo
🧠 Normalize global state
🐢 Lazy load pages and debounce inputs
⚙️ Optimize backend queries

🙋 Have You Faced This Too?

Let me know in the comments if your React app is slow and you're stuck. I'd love to help you debug or even collaborate on performance tips.

📬 Follow for More

I’ll be sharing more about MERN stack development, real-world problems, and practical solutions. Hit follow if you found this post helpful!

Thanks for reading ❤️