Understanding about React Outlet with proper routing

This article will explore how React outlets function and the routing fundamentals in React applications. First and foremost we need to understand the basics of routing

Understanding the Basics

Before diving into , let's ensure we have a solid understanding of React Router.

• What is a React Router? React Router is a popular JavaScript library that enables navigation between different views in a React application. It allows you to define routes, which map URLs to specific components. More..

• Why is routing important? Routing is essential for building single-page applications (SPAs) where the user can navigate without full page reloads, creating a smoother and more dynamic experience.

Now let's dive into the React Outlet

What is React Outlet?

The <Outlet> component is a placeholder within a parent route's component that tells React Router where to render the child routes. It acts like a dynamic container that changes its content based on the current URL.
This feature helps in managing complex layouts where a portion of the page remains consistent, such as headers or sidebars, while other parts change dynamically based on the route.

How does it work: When the URL matches a parent route, the React Router looks for an <Outlet> within that parent's component. It then renders the matching child route's component into that <Outlet>.

Let's Implement the Outlet with proper react routing for the React Application

import React from "react";

// import components
import AllRoutes from "./routes";

// component
const App = () => {
  return (
    <>

      <AllRoutes />
    </>
  );
};
export default App;

This AllRoutes Component defines a routing system for a React application using react-router-dom, which handles navigation between different pages in a React web app. Here’s a detailed breakdown of the code

// import packages

import { BrowserRouter, Outlet, Route, Routes } from "react-router-dom";
import React, { Suspense, lazy } from "react";
import {
  dashboard,
  homePath,
  loginPath,
  rootPath
} from "./routePaths";

import Loader from "../components/loader";
import ProtectedRoute from "./protectedRoute";

// import route paths

const LoginComponent = lazy(() => import("../pages/login"));
const HomeComponent = lazy(() => import("../pages/home"));
const RouteNotFoundComponent = lazy(() => import("../pages/pageNotFound"));

const DashboardComponent = lazy(() => import("../pages/dashboard/"));

const AllRoutesComponent = () => {
  return (
    <Suspense fallback={<Loader />}>
      <BrowserRouter>
        <Routes>
          <Route path={rootPath} element={<Outlet />}>
            <Route index element={<LoginComponent />} />
            <Route path={loginPath} element={<LoginComponent />} />
            <Route element={<ProtectedRoute />}>
              <Route path={homePath} element={<HomeComponent />} />
              <Route path={dashboard} element={<DashboardComponent />} />
            </Route>
            <Route path="*" element={<RouteNotFoundComponent />} />
          </Route>
        </Routes>
      </BrowserRouter>
    </Suspense>
  );
};

export default AllRoutesComponent;

Importing Packages

BrowserRouter: This component enables routing in the browser. It uses the HTML5 history API to keep the UI in sync with the URL.
Outlet, Route, Routes: These components define and handle the various routes (or pages) in the application.
Suspense: Suspense is used to handle lazy-loaded components. It displays a fallback component (in this case, a custom loader) while the component is being loaded.
lazy: This function enables code-splitting by lazily loading components only when they are needed, improving the app's performance by reducing the initial bundle size.
Loader: This is a custom component that shows a loading indicator while the components are being lazily loaded.
ProtectedRoute: This custom component ensures that certain routes are only accessible to authorized users, enforcing security.
Root Route (/): This route is for the root path of our application. It renders the Login component.

Importing Route Paths

The application imports predefined paths (e.g., dashboard, homePath, loginPath, rootPath) from a separate file (routePaths). This makes the code easier to maintain and avoids hardcoding route paths within the components.

Defining Routes in the AllRoutesComponent

The main function, AllRoutesComponent, defines how the different routes in the app are handled:
<BrowserRouter>: Wraps the routing structure and manages browser navigation.
<Routes>: This component holds all the defined routes of the application.
<Route>: Defines a single route. The path prop defines the URL pattern, and the element prop specifies the component to render for that route.

• The root (rootPath) route serves as a container for child routes.

• The index route renders the LoginComponent by default when the user visits the / path.

• The /login path also renders the LoginComponent.

• Routes like /home and /dashboard are wrapped inside a ProtectedRoute component, ensuring that only authorized users can access these pages.

<Outlet>: This allows rendering nested routes. Any child routes (like /login, /home) are rendered inside the parent route (rootPath).

What are the Protected Routes?

Some routes (like homePath and dashboard) are nested inside a ProtectedRoute element. This means users must meet certain conditions (like being logged in) to access those pages. If a user is unauthorized, the ProtectedRoute component typically redirects them to the login page or an error page.
Here is the code of the Protected route

// import packages
import React, { useEffect } from "react";
import { useNavigate, Outlet } from "react-router-dom";

import BaseLayout from "../pages/layout";

// import route paths
import { rootPath } from "./routePaths";

// component
const ProtectedRoute = () => {
  const navigate = useNavigate();();
  const isAuthenticated = false; //add a dynamic method call
  const user = 'shruti';//add a dynamic method call

  useEffect(() => {
    if (!isAuthenticated) {
      return navigate(rootPath, { replace: true });
    }
  }, [isAuthenticated, navigate]);

  return (
    <BaseLayout >
      <Outlet />
    </BaseLayout>
  );
};

export default ProtectedRoute;

Explanation about the code

• Importing Packages

React, { useEffect }: React is the core package for building the UI, and useEffect is a hook that runs side effects in functional components. Here, useEffect is used to handle the redirection if the user is not authenticated.
useNavigate: This hook from react-router-dom enables programmatic navigation. It's used to redirect users when they are not authenticated.
Outlet: This is a placeholder for nested routes inside the protected route. It allows the rendering child routes dynamically.
BaseLayout: This component wraps the protected route with a layout, providing a consistent look and structure for protected pages.

• Component Definition

useNavigate(): This hook allows navigating to different routes. In this case, it is used to navigate to rootPath if the user is not authenticated.
isAuthenticated and user: These values are hardcoded for now but can be dynamically set, typically by checking some authentication state (like a JWT token, session data, etc.) from a global state or a context.
isAuthenticated: A flag that determines whether the user is authenticated. If false, the user is redirected.
user: The current logged-in user. This value can be dynamically retrieved from a context or global state, but for now, it's a hardcoded string ('shruti').

useEffect:The useEffect hook runs whenever authenticated or navigates changes.
Inside useEffect, the code checks whether the user is authenticated. If not (! is authenticated), the user is redirected to the root path using the navigate function.
The { replace: true } option prevents adding the redirection to the browser's history, meaning the user won't be able to navigate back to the protected page.

Now Let's dive in to the BaseLayout Component Code

import React, { lazy } from "react";

import ErrorBoundary from "../../components/error-boundary";

// const Header = lazy(() => import("@components/header"));
const Sidebar = lazy(() => import("../../components/sidebar"));
export default function BaseLayout(props) {
  const { children } = props;
  // common things we need to show on each page like Header,sidebar ,Footer
  return (
    <ErrorBoundary>
      <div className="wrapper">
        <div className="d-flex position-relative">
          <Sidebar />
          <main className="main-container">
            {/* <Header /> */}
            {children}//components from all routes
          </main>
        </div>
      </div>
    </ErrorBoundary>
  );
}

BaseLayout.defaultProps = {
  children: [],
  user: {},

The BaseLayout component serves as a common layout structure for all pages in our application.
It contains common elements like a sidebar and main content area.
Child components from different routes are rendered using the Outlet component within the main content area.

Try this article to implement the lazy loading routing with router outlet

Conclusion

Lazy loading routing with Outlet in React is a powerful way to optimize performance by reducing the initial load time of your app. By using React.lazy() and Suspense, you ensure that components are loaded only when needed, while the Outlet component allows for efficient nested routing. Combined with the use of protected routes, this approach provides a modular, scalable, and performance-friendly structure for managing routes in your application.

That's It!

Give it a try, and let me know your thoughts in the comments!