Introducing Mongez React Router (MRR) – a robust and efficient React router system designed to streamline the management of routes in your React applications. Whether you're working on a TypeScript or JavaScript project, MRR offers a powerful set of features that enhance the way you handle navigation and route configurations.

#Highlighted Features:

• ✅ Readable and Clean Route Declarations: Declare routes in a clear and readable manner, making it easier to understand and maintain your application's navigation structure.

• ✅ Common Layout Base: Implement a common layout base for multiple routes to prevent unnecessary re-rendering of partials like headers and footers.

• ✅ Easy Middleware Definitions: Define middleware effortlessly, enhancing the flexibility and extensibility of your route handling.

• ✅ Lazy Loading: Efficiently reduce production bundle size through lazy loading of entire apps and modules.

• ✅ Grouping Routes: Group routes based on common features such as setting a base path and applying common middleware, promoting a structured and organized approach.

• ✅ Language Switching: Switch languages without reloading the entire page, providing a seamless user experience.

• ✅ Base Layout Configuration: Set common components like headers and footers in one central location for consistency across your application.

• ✅ Page Refreshing Options: Choose to refresh the page when navigating to the same route, giving you control over user interactions.

• ✅ Navigation Helpers: Leverage a variety of helpers to navigate between routes using functions, enhancing the user experience.

• ✅ No Ugly Route Writing: Say goodbye to complex and convoluted route declarations within your components.

#React 17 and Earlier:

If you're using React 17, please opt for Version 1 of MRR. Version 2 is tailored for React 18 and higher.

#Installation:

yarn add @mongez/react-router

# Or using npm
npm i @mongez/react-router

#Usage:

In your src/index file, import the package and adjust the ReactDOM.render section as follows:

// src/index.ts
import router from "@mongez/react-router";

// Remove the following code from the file
import ReactDOM from "react-dom";
import App from "./App";

ReactDOM.render(
  
    
  ,
  document.getElementById("root")
);

// Add route for the home page
// src/index.ts
import router from "@mongez/react-router";

// Start scanning for all registered routes
router.scan();

#Registering Routes:

Now, let's register a route for our home page:

// src/routes.ts
import router from "@mongez/react-router";
import HomePage from "./pages/HomePage";

router.add("/", HomePage);

Remember to import the routes.ts file in your src/index.ts file:

// src/index.ts
import router from "@mongez/react-router";
import "./routes";

// Start scanning for all registered routes
router.scan();

Your app is now ready to be served on the / route. Ensure that you call router.scan after declaring all your routes.

#Declaring Routes:

There are various ways to declare routes, but the most common method is using the router.add function:

// src/routes.ts
import router from "@mongez/react-router";
import HomePage from "./pages/HomePage";

router.add("/", HomePage);

This is the basic usage. You can also use dynamic paths, such as getting the user ID from the URL:

// src/routes.ts
import router from "@mongez/react-router";
import HomePage from "./pages/HomePage";
import UserDetailsPage from "./pages/UserDetailsPage";

router.add("/", HomePage);
router.add("/users/:id", UserDetailsPage);

Now, the UserDetailsPage will receive a **params ** object in its props, with the id available as params.id:

// src/pages/UserDetailsPage.tsx
import React from "react";

export default function UserDetailsPage({ params }) {
  const userId = params.id;

  return 
User ID: {userId}
;
}

#Adding New Routes:

Routes can be added using the router.add method, which accepts four parameters:

• path: The path of the route (string or array of strings).

• component: The component to be rendered.

• middleware: An array of middleware to be executed before rendering the component.

• layout: The base layout component that the page will be rendered inside.

import HomePage from "./HomePage";
import Guardian from "./middleware/Guardian";
import BaseLayout from "./layouts/BaseLayout";

router.add("/", HomePage, [Guardian], BaseLayout);

The only required parameters are path and component, the rest are optional. You can also customize it by passing a single object as an argument:

router.add({
  path: "/",
  component: HomePage,
  middleware: [IsLoggedIn],
  layout: BaseLayout,
});

Embrace the power of Mongez React Router to enhance your React application's navigation structure, making it more readable, maintainable, and efficient. Whether you're a seasoned developer or just starting with React, MRR brings a set of features that can elevate your development experience. Explore the possibilities and navigate your React app with ease!

Wait for more, to be continued !