Best Practices for Routing and Navigation

Introduction

Routing is a fundamental part of modern React applications. Properly managing routes and navigation ensures that users have a smooth and consistent experience while maintaining maintainable code and application performance. As applications grow in complexity, following best practices for routing becomes essential to avoid issues such as code duplication, slow load times, and unprotected sensitive pages.

This post will cover key best practices for routing and navigation in React, including:

1. Organizing routes in separate modules or configuration files
2. Protecting sensitive routes and data
3. Handling redirects and query parameters consistently
4. Performance tips: lazy loading, memoization, and route hierarchy

---

1. Organizing Routes in Separate Modules or Config Files

As your application grows, managing all routes in a single file or component becomes difficult. Organizing routes into separate modules or configuration files improves maintainability, readability, and scalability.

1.1 Using a Centralized Route Configuration

You can define routes in a separate configuration file, including path, component, and meta-information:

// routesConfig.js
import Home from "./pages/Home";
import About from "./pages/About";
import Dashboard from "./pages/Dashboard";
import Profile from "./pages/Profile";

const routes = [
  { path: "/", element: <Home /> },
  { path: "/about", element: <About /> },
  {
path: "/dashboard",
element: &lt;Dashboard /&gt;,
children: &#91;
  { path: "profile", element: &lt;Profile /&gt; },
],
  },
];

export default routes;

1.2 Rendering Routes Dynamically

// App.js
import React from "react";
import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
import routes from "./routesConfig";

function renderRoutes(routesArray) {
  return routesArray.map((route) => {
if (route.children) {
  return (
    <Route path={route.path} element={route.element} key={route.path}>
      {renderRoutes(route.children)}
    </Route>
  );
}
return <Route path={route.path} element={route.element} key={route.path} />;
  });
}

function App() {
  return (
<Router>
  <Routes>{renderRoutes(routes)}</Routes>
</Router>
  );
}

export default App;

Benefits:

• Easier to manage routes for large applications
• Supports nested routes without cluttering the main App component
• Centralized route definitions make updates and debugging easier

---

2. Protecting Sensitive Routes and Data

Many applications require certain routes to be accessible only to authenticated users or users with specific roles. Protecting sensitive routes ensures security and proper user experience.

2.1 Creating a Protected Route Component

import React from "react";
import { Navigate } from "react-router-dom";

function ProtectedRoute({ isAuthenticated, children }) {
  if (!isAuthenticated) {
return <Navigate to="/login" replace />;
  }
  return children;
}

export default ProtectedRoute;

2.2 Using ProtectedRoute

<Route
  path="/dashboard"
  element={
&lt;ProtectedRoute isAuthenticated={userLoggedIn}&gt;
  &lt;Dashboard /&gt;
&lt;/ProtectedRoute&gt;
  }
/>

Explanation:

• Navigate redirects unauthenticated users to the login page.
• replace ensures the login page does not remain in the history stack.
• The pattern can be extended for role-based access (e.g., admin, editor).

2.3 Protecting Nested Routes

<Route path="/dashboard" element={<ProtectedRoute isAuthenticated={userLoggedIn}><Dashboard /></ProtectedRoute>}>
  <Route path="profile" element={<Profile />} />
  <Route path="settings" element={<Settings />} />
</Route>

• Nested routes automatically inherit protection.
• Avoids code duplication for multiple protected pages.

---

3. Handling Redirects and Query Parameters Consistently

Redirects and query parameters are common in React apps for navigation after actions, search, filtering, or deep-linking.

3.1 Programmatic Redirects

Use useNavigate for redirecting after events:

import { useNavigate } from "react-router-dom";

const navigate = useNavigate();
navigate("/dashboard"); // push a new entry
navigate("/dashboard", { replace: true }); // replace current entry

3.2 Managing Query Parameters

Query parameters allow passing optional data through the URL.

import { useSearchParams } from "react-router-dom";

function SearchPage() {
  const [searchParams, setSearchParams] = useSearchParams();
  const query = searchParams.get("q") || "";

  const handleSearch = (e) => {
setSearchParams({ q: e.target.value });
  };

  return (
<div>
  <input value={query} onChange={handleSearch} placeholder="Search..." />
  <p>Search Query: {query}</p>
</div>
  );
}

Best Practices:

• Always use useSearchParams or URLSearchParams for parsing query parameters.
• Maintain query parameters during navigation when necessary.
• Avoid storing sensitive data in query parameters; prefer state or context.

3.3 Redirects After Submission

• After login, signup, or form submission, redirect the user to the target page.
• Use replace: true to prevent navigating back to sensitive pages.

navigate("/dashboard", { replace: true });

---

4. Performance Tips: Lazy Loading, Memoization, and Route Hierarchy

Routing can impact application performance if large components are loaded upfront or unnecessary renders occur.

4.1 Lazy Loading Routes

React supports lazy loading components using React.lazy and Suspense.

import React, { Suspense, lazy } from "react";
import { BrowserRouter as Router, Routes, Route } from "react-router-dom";

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

function App() {
  return (
<Router>
  <Suspense fallback={<div>Loading...</div>}>
    <Routes>
      <Route path="/dashboard" element={<Dashboard />}>
        <Route path="profile" element={<Profile />} />
      </Route>
    </Routes>
  </Suspense>
</Router>
  );
}

export default App;

Benefits:

• Reduces initial bundle size
• Loads components only when needed
• Improves perceived performance for users

4.2 Memoization

• Use React.memo for components that do not change often.
• Prevents unnecessary re-renders when navigating between routes.

const Sidebar = React.memo(function Sidebar({ links }) {
  return (
<nav>
  {links.map((link) => (
    <a key={link.path} href={link.path}>{link.name}</a>
  ))}
</nav>
  );
});

4.3 Optimizing Route Hierarchy

• Organize routes from general to specific.
• Keep parent layout components minimal and efficient.
• Avoid rendering heavy components at the top-level if not necessary.

Example:

• Layout component contains header, sidebar, and Outlet only.
• Nested pages handle heavy content or complex UI.

---

5. Additional Best Practices

5.1 Consistent URL Structure

• Use hyphens for multi-word URLs (/user-profile).
• Keep paths descriptive and human-readable.
• Reflect hierarchy using nested paths (/dashboard/settings).

5.2 Use Relative Links in Nested Routes

<Link to="profile">Profile</Link> // relative to /dashboard

• Makes code more maintainable when parent paths change.

5.3 Error Handling

• Include a 404 route for unmatched paths:

<Route path="*" element={<NotFound />} />

• Improves user experience and prevents blank screens.

5.4 Integration with State Management

• Global state libraries like Redux or Context API can store navigation-related data.
• Avoid unnecessary prop drilling for route-based state.

---

6. Real-World Use Cases

1. E-commerce Platforms
   • Nested product categories and filters
   • Lazy load product details pages for performance
2. Dashboards and Admin Panels
   • Protect sensitive routes with authentication
   • Use nested routes for tabs, reports, and settings
3. Multi-Step Forms
   • Each step as a nested route
   • Navigation controlled programmatically with useNavigate
4. Search and Filter Pages
   • Preserve query parameters during navigation
   • Use consistent state management for filters