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.
✅ 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.
If you're using React 17, please opt for Version 1 of MRR. Version 2 is tailored for React 18 and higher.
yarn add @mongez/react-router # Or using npm npm i @mongez/react-router
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();
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.
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; returnUser ID: {userId}; }
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 !