Mongez React Router (MRR): Navigating Your React App with Ease

Mohamed Eltahawy
Nov 22, 2023
3 min read
post_comment0 Comments
post_like2 Likes

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 yoursrc/indexfile, 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 yoursrc/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 callrouter.scanafter declaring all your routes.

#Declaring Routes:

There are various ways to declare routes, but the most common method is using therouter.addfunction:

// 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, theUserDetailsPagewill receive a**params **object in its props, with theidavailable asparams.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 therouter.addmethod, 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 arepathandcomponent, 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 !