Breaking News: Grepper is joining You.com. Read the official announcement!

react dynamic layout with route, react router dom v6

WinMaw answered on January 21, 2024 Popularity 1/10 Helpfulness 1/10

answer react dynamic layout with route, react router dom v6

react dynamic layout with route, react router dom v6

Comment

route.jsx
======================================================
import React, { lazy, Suspense } from "react";
import { useSelector } from "react-redux";
import { Outlet, Route, Routes, useNavigate } from "react-router-dom";

import Loading from "@components/customers/shared/Loading";
import Error from "@pages/customer/error/Error";
// Lazy load components
const Home = lazy(() => import("@pages/Customer/Home"));
const Profile = lazy(() => import("@pages/Customer/Profile"));
const Checkout = lazy(() => import("@pages/Customer/Checkout"));
const UnauthorizedError = lazy(() => import("@pages/Customer/error/UnauthorizedError"));

const CustomerRoute = () => {
  const isAuthenticated = useSelector((state) => state.auth.isAuthenticated);
  const PrivateRoute = ({ children }) => {
    return isAuthenticated ? children : <UnauthorizedError />;
  };

  return (
    <Routes>
      <Route
        element={
          <Suspense fallback={<Loading />}>
            <CustomerLayout />
          </Suspense>
        }
      >
        <Route path="/" element={<Home />} />
        <Route
          path="/profile"
          element={
            <PrivateRoute>
              <Profile />
            </PrivateRoute>
          }
        />
          <Route path="*" element={ <Error
            statusCode={404}
            title={"Page Not Found"}
            message="Sorry, the page you are looking for could not be found. 
            Please check the URL or go back to the previous page."
          />} />
      </Route>
    </Routes>
  );
};

export default CustomerRoute;

function CustomerLayout() {
  return (
    <>
      <div className="flex flex-col min-h-screen bg-secondary">
        <header className="">
          <Nav />
        </header>
        <main className="flex-grow container mx-auto ">
          <Outlet />
        </main>
        {/* <footer className="bg-secondary py-10 w-full text-white mx-auto">
        </footer> */}
      </div>
    </>
  );
}

Popularity 1/10 Helpfulness 1/10 Language javascript

Source: Grepper

Tags: dom dynamic javascript layout react-router

Link to this answer
Share Copy Link

Contributed on Jan 21 2024

WinMaw

0 Answers Avg Quality 2/10

react dynamic layout with route, react router dom v6

Contents

More Related Answers

react dynamic layout with route, react router dom v6

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.