All about routing in React (Part 1) ft. react-router-dom

Here, in this post we are going to learn about the routing in react applications using react-router-dom v6.

React-router-dom is a powerful library that is used to handle the routing mechanism in the react application. Its special because in addition to routing it also provides the way to achieve client-side-routing instead of server-side-routing.

Before getting to point on how it provides the client-side-routing, lets discuss in short about client-side-routing and server-side-routing.

So basically in old web apps where hyperlinks (to navigate to other pages) were mentioned using anchor tag, used to make the request to the server and server used to send the page data in response. Even if in react we use anchor tags to navigate we can see that as we click on hyperlinks it will make a request to server and server will return the landing page of our app (where a div with id root is placed), and browser will paint on to that page.
Such kind of routing is called server-side-routing.

Now, another comes client-side-routing, where for getting the content of new page (page to which we want to land), webapp will not make a request to the server.

So how and from where that page content will come from? 🤔
Well in react when we first time hit the domain of our app, all the components are loaded. And these already loaded components will be only served when we navigate to page. Simple !!!

This was about the two types of routing that is used across all web apps.

Now, lets discuss on about "how to start with react-router-dom, to handle routing?"

So, to start with routing we first need to convey our react app all important information about routes and what to show.

This is done by creating routing configuration and wrap our whole app with this routing configuration.

import { Outlet, createBrowserRouter, useLocation } from "react-router-dom";
export const appRouter = new createBrowserRouter([
  {
    path: "/",
    element: <AppLayout />,
    errorElement: <Error />,
  },
  {
    path: "/about",
    element: <About />,
  },
  {
    path: "/contact",
    element: <Contact />,
  },
]);

So, here basically we mentioned -

1. Number of routes.
2. Path of routes.
3. Component to display on each route.

Remember - if component is missed than <Outlet/> will be rendered, which is by default null (means a white screen)

But this is not enough, because still our app is not aware about the paths or routes. To make our app aware about routes and what to show for each path, we need to wrap whole app inside the router provider.

import { RouterProvider } from "react-router-dom";
import AppLayout from "./src/AppLayout";
import ReactDOM from "react-dom/client";
import { appRouter } from "./src/AppLayout";

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  <RouterProvider router={appRouter}>
    <AppLayout />
  </RouterProvider>
);

This AppLayout is the starting point of our react-app.

Now our app is aware about all the routes. 🚀

This was about basic routing, but lets say if requested path is not aware than? What to show? How to handle?
No worries, errorElement will take care of it.

In the next post/article we will resume about nested routes, dynamic routing etc. 😊