middleware در react-router-dom

شما باید برای هر میدلوری که لازم دارین، یک کامپوننت جدید بسازید و داخل سوئیچ روتر، اون رو صدا بزنید.
یک مثال ساده میزنم. یک سری روت داریم که کاربرای لاگین نشده نباید بهشون دسترسی داشته باشند. مثل روت ویرایش مشخصات کاربری:

<Route exact path="/edit_profile" component={EditProfile} />

حالا داخل سوئیچ روتر، به جای روت بالا، یک کامپوننت خودمون میسازیم به نام مثلا PrivateRoute و اون رو داخل سوئیچ قرار میدیم:

<PrivateRoute exact path="/edit_profile" component={EditProfile} />

حالا کامپوننت رو بسته به نیاز خودمون کاستوم میکنیم. اینجا مثلا من اول چک میکنم اگر کاربر لاگین بود به روت موردنظرش منتقل بشه وگرنه هدایت بشه به صفحه لاگین. این چک رو با متغیر isLogin انجام میدم:

import React from "react";

import { Route, Redirect } from "react-router-dom";

const PrivateRoute = ({ path, component }) => {
  return (
    <>
      {isLogin ? (
        <Route exact path={path} component={component} />
      ) : (
        <Redirect to="/login" />
      )}
    </>
  );
};

export default PrivateRoute;

سلام
من قبلا این کار انجام داده بودم
من می خوام قبل از این که وارد کامپونت بشه middleware اجرا بشه
مثل فریمورک لاراول middleware قبل ورود به کنترلر اجرا میشه