In ReactJS applications, navigation between different components or “pages” is managed through routing. We use the react-router-dom library for this purpose. This document provides a general overview of how routing is structured and implemented.

​
Basic Routing Structure

The routing structure is initiated with a BrowserRouter component which enables the use of HTML5 history API. Inside it, we define our routes using the Routes and Route components. 
<BrowserRouter>
  <Routes>
    <Route path="/path-to-component" element={<Component />} />
    <!-- More routes can be added here -->
  </Routes>
</BrowserRouter>
Each Route is defined with a path prop that denotes the URL path and an element> prop that renders the corresponding component when the path is matched.

​
Nested Routes

Nested routes allow for a hierarchical structure of components, where child routes inherit properties or layouts from their parent routes. 
<Routes>
  <Route path="/parent-path" element={<ParentComponent />}>
    <Route path="child-path" element={<ChildComponent />} />
  </Route>
</Routes>
Here, ChildComponent is nested within ParentComponent, and it will inherit any layouts or context provided by ParentComponent.

​
Protected Routes

Protected routes are used to restrict access to certain parts of the application based on certain conditions, like user authentication. 
<Routes>
  <Route element={<ProtectedRoute />}>
    <Route path="/protected-path" element={<ProtectedComponent />} />
  </Route>
</Routes>
ProtectedRoute is a higher-order component that wraps around the protected component. It checks for the specified conditions and either renders the component or redirects the user.

​
Adding a New Route

To incorporate a new route within your application, you’ll need to:
  1. Define the component that you wish to navigate to. Let’s call this NewComponent.
  2. Within the Routes component, insert a new Route.
<Route path="/new-path" element={<NewComponent />} />
This new route will now be accessible at the specified path.

​
Programmatically Navigating

For programmatic navigation, react-router-dom provides the useNavigate hook. 
const navigate = useNavigate();
navigate("/path-to-navigate");
This code snippet will navigate the user to the specified route. When adding new routes, ensure they are placed within the correct parent route to inherit any necessary layouts or protections.

​
Adding a New Route Within a Layout

When your application has a layout component (like DashboardPage with a SidebarNavigation), and you want to add a new route (NewComponent) within this layout, you can follow these steps:
  1. Define NewComponent.
  2. Inside the routing configuration, add a new Route nested within the layout component’s Route.
<Route path="/dashboard" element={<DashboardPage />}>
  <Route path="new-path" element={<NewComponent />} />
</Route>
In this setup, NewComponent will be accessible at /dashboard/new-path and will inherit the DashboardPage layout, which includes the SidebarNavigation. The DashboardPage component uses the <Outlet /> component to render its child routes: 
const DashboardPage = (): JSX.Element => {
  return (
    <MainLayout sideBars={[<SidebarNavigation key={"main-side-bar"} />]}>
      <Outlet />
    </MainLayout>
  );
};
The <Outlet /> component is where the child routes get rendered. In this case, NewComponent will be rendered inside the MainLayout of the DashboardPage.