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

react private route protect with login or not, react lazy load route, react dynamic layout

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

answer react private route protect with login or not, react lazy load route, react dynamic layout

react private route protect with login or not, react lazy load route, react dynamic layout

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>
    </>
  );
}
========================================================================================
authSlice.jsx
// authSlice.js
import { createSlice } from "@reduxjs/toolkit";

const authSlice = createSlice({
	name: "auth",
	initialState: {
		isAuthenticated: false,
		user: null,
		
	},
	reducers: {
		login: (state, action) => {
			state.isAuthenticated = true;
			state.user = action.payload;
			
		},
		logout: (state) => {
			state.isAuthenticated = false;
			state.user = null;
		},
	},
});

export const { login, logout } = authSlice.actions;
export default authSlice.reducer;

Popularity 1/10 Helpfulness 1/10 Language javascript

Source: Grepper

Tags: dynamic javascript layout private react-lazy-load

Link to this answer
Share Copy Link

Contributed on Jan 21 2024

WinMaw

0 Answers Avg Quality 2/10

react private route protect with login or not, react lazy load route, react dynamic layout

Contents

More Related Answers

react private route protect with login or not, react lazy load route, react dynamic layout

Grepper

Documentation

Social

Legal

Contact

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