? ????? React ???? ???? ??? React ??????? ??? ?? ??? ?????. ????? ???? ??? ???? ???

?? ?? ??

? ???? ?? React Router? ?? ??? ???? ??? ???????.

• React Router? ?????? React Router? React ??????? ??? ?? ? ??? ???? ?? ?? ???? JavaScript ????????. ?? ?? URL? ?? ?? ??? ???? ??? ??? ? ????. ?..

• ???? ??? ??? ?????? ???? ???? ?? ???? ?? ???? ??? ??? ? ?? ?? ??? ??????(SPA)? ???? ? ????? ? ???? ???? ??? ?????.

?? React Outlet? ???????

??? ????? ??????

????? React Router? ?? ??? ???? ??? ???? ?? ?? ?? ?? ?? ?? ??????. ?? URL? ???? ???? ???? ?? ?????? ?????.
? ??? ??? ????? ?? ???? ??? ???? ???? ?? ??? ??? ?? ???? ???? ??? ????? ???? ? ??? ???.

?? ??: URL? ?? ??? ???? React Router? ?? ?? ?? ?? ???. ?? ?? ???? ?? ??? ?? ??? ?? ?? ??????.

React ??????? ??? ?? ???? ???? Outlet? ??? ?????

import React from "react";

// import components
import AllRoutes from "./routes";

// component
const App = () => {
  return (
    <>

      <AllRoutes />
    </>
  );
};
export default App;

? AllRoutes ?? ??? React ? ?? ?? ??? ? ??? ???? React-router-dom? ???? React ??????? ??? ???? ?????. ??? ?? ??? ??? ??? ????

import React from "react";

// import components
import AllRoutes from "./routes";

// component
const App = () => {
  return (
    <>

      <AllRoutes />
    </>
  );
};
export default App;

??? ????

BrowserRouter: ? ?? ??? ?????? ???? ??????. HTML5 ?? API? ???? UI? URL? ???? ?????.
???, ??, ??: ??? ?? ??? ??????? ??? ??(?? ???)? ???? ?????.
Suspense: Suspense? ?? ??? ?? ??? ???? ? ?????. ????? ???? ?? ?? ????(? ?? ??? ?? ??)? ?????.
??: ? ??? ??? ?? ?? ??? ?? ???? ?? ??? ???? ?? ?? ?? ??? ?? ? ??? ??????.
??: ????? ??? ???? ?? ?? ??? ???? ??? ?? ???????.
ProtectedRoute: ? ??? ?? ?? ??? ??? ???? ?? ??? ???? ? ??? ???? ??? ?????.
?? ??(/): ? ??? ??????? ?? ?????. ??? ????? ??????.

?? ?? ????

??????? ??? ??(routePaths)?? ?? ??? ??(?: ????, homePath, loginPath, rootPath)? ?????. ??? ?? ??? ? ?? ?? ??? ? ??? ?? ?? ??? ?? ??? ?? ???? ?? ??? ? ????.

AllRoutesComponent?? ?? ??

?? ??? AllRoutesComponent? ?? ??? ??? ???? ??? ?????.
: ??? ??? ???? ???? ??? ?????.
: ? ?? ??? ??????? ??? ?? ??? ?????.
: ?? ??? ?????. path prop? URL ??? ????, element prop? ?? ??? ?? ???? ?? ??? ?????.

• ??(rootPath) ??? ?? ??? ???? ??? ???.

• ??? ??? ???? / ??? ??? ? ????? LoginComponent? ??????.

• /login ??? LoginComponent? ??????.

• /home ? /dashboard? ?? ??? ProtectedRoute ?? ?? ?? ???? ??? ???? ??? ???? ???? ? ??? ?????.

: ??? ??? ???? ? ????. ?? ?? ??(?: /login, /home)? ?? ??(rootPath) ??? ??????.

??? ??? ??????

?? ??(?: homePath ? ????)? ProtectedRoute ?? ?? ?????. ?? ???? ?? ???? ?????? ?? ??(?: ???)? ???? ?? ?????. ???? ???? ?? ?? ProtectedRoute ?? ??? ????? ???? ??? ???? ?? ???? ???????.
??? ??? ??? ??? ????

// import packages

import { BrowserRouter, Outlet, Route, Routes } from "react-router-dom";
import React, { Suspense, lazy } from "react";
import {
  dashboard,
  homePath,
  loginPath,
  rootPath
} from "./routePaths";

import Loader from "../components/loader";
import ProtectedRoute from "./protectedRoute";

// import route paths

const LoginComponent = lazy(() => import("../pages/login"));
const HomeComponent = lazy(() => import("../pages/home"));
const RouteNotFoundComponent = lazy(() => import("../pages/pageNotFound"));

const DashboardComponent = lazy(() => import("../pages/dashboard/"));

const AllRoutesComponent = () => {
  return (
    <Suspense fallback={<Loader />}>
      <BrowserRouter>
        <Routes>
          <Route path={rootPath} element={<Outlet />}>
            <Route index element={<LoginComponent />} />
            <Route path={loginPath} element={<LoginComponent />} />
            <Route element={<ProtectedRoute />}>
              <Route path={homePath} element={<HomeComponent />} />
              <Route path={dashboard} element={<DashboardComponent />} />
            </Route>
            <Route path="*" element={<RouteNotFoundComponent />} />
          </Route>
        </Routes>
      </BrowserRouter>
    </Suspense>
  );
};

export default AllRoutesComponent;

?? ??

• ??? ????

React, { useEffect }: React? UI ??? ?? ?? ?????, useEffect? ??? ?????? ??? ???? ???? ?????. ??? useEffect? ???? ???? ?? ?? ????? ???? ? ?????.
useNavigate: React-router-dom? ? ??? ????? ?? ??? ??????. ???? ?? ???? ?????? ? ?????.
Outlet: ??? ?? ??? ??? ??? ?? ?? ??????. ?? ??? ???? ???? ? ????.
BaseLayout: ? ?? ??? ??? ??? ?????? ???? ??? ???? ??? ??? ??? ?????.

• ???? ??

useNavigate(): ? ??? ???? ?? ??? ??? ? ????. ? ?? ???? ???? ?? ?? rootPath? ???? ? ?????.
isAuthenticated ? ???: ? ?? ?? ?????? ??? ????? ?? ?? ?? ?????? ?? ?? ??(?: JWT ??, ?? ??? ?)? ???? ???? ??? ? ????.
isAuthenticated: ???? ?????? ??? ???? ??????. false? ?? ???? ???????.
???: ?? ???? ??????. ? ?? ???? ?? ?? ???? ???? ??? ? ??? ??? ????? ???('shruti')???.

useEffect:useEffect ??? ????? ?? ??? ??? ??? ?????.
useEffect ???? ??? ???? ?????? ??? ?????. ??? ?? ??(!? ??? ??) ?? ??? ???? ???? ?? ??? ???????.
{replace: true } ??? ???? ??? ????? ???? ?? ?????. ?, ???? ??? ???? ?? ??? ? ????.

?? BaseLayout ?? ?? ??? ???????

import React from "react";

// import components
import AllRoutes from "./routes";

// component
const App = () => {
  return (
    <>

      <AllRoutes />
    </>
  );
};
export default App;

BaseLayout ?? ??? ??????? ?? ???? ?? ?? ???? ?? ??? ???.
????, ?? ??? ?? ? ?? ??? ???? ????.
??? ??? ?? ?? ??? ?? ??? ?? ?? Outlet ?? ??? ???? ??????.

??? ????? ?? ?? ???? ????? ? ??? ??? ???

??

React? Outlet? ??? ?? ?? ???? ?? ?? ?? ??? ?? ??? ????? ??? ?????. React.lazy() ? Suspense? ???? ??? ???? ?? ??? ???? ?? Outlet ?? ??? ???? ?? ???? ?????. ??? ??? ??? ??? ? ?? ??? ???????? ??? ???? ?? ?? ???? ?? ???? ??? ??? ?????.

?? ??!

?? ??? ??? ??? ?????!

? ??? ??? ???? ?? React Outlet? ?? ??? ?? ?????. ??? ??? PHP ??? ????? ?? ?? ??? ?????!