Create Route Middleware

How to create your own custom route middleware

Creating a route middleware is super easy.

A route middleware is nothing but a react component which accepts "fallbackPath" as a prop. Here are steps to create your custom middleware:

Create route middleware component

In Jumbo, all of the route middleware are located inside the /src/app/routes/middleware/ folder.

So, you can create a component folder inside the above folder. For example:

/src/app/routes/middleware/MyRouteMiddlware

Inside this MyRouteMiddleware component, you can create your component file "index.js" with the following code in it:

import React from 'react';
import {Navigate, Outlet} from "react-router-dom";

const MyRouteMiddleware = ({fallbackPath}) => {
    

    if (<your condition to pass test>) {
        return <Outlet/>;
    }

    return <Navigate to={fallbackPath}/>;
};

export default MyRouteMiddleware;

That is it :)