-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathApp.js
87 lines (81 loc) · 2.09 KB
/
App.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
import React, { lazy, Suspense, useEffect, useState } from "react";
import ReactDOM from "react-dom/client";
import Header from "./Components/Header";
import Body from "./Components/Body";
import Footer from "./Components/Footer";
import About from "./Components/About";
import ContactUs from "./Components/ContactUs";
import Cart from "./Components/Cart";
import Error from "./Components/Error";
import RestaurantMenu from "./Components/RestaurantMenu";
import { createBrowserRouter, RouterProvider, Outlet } from "react-router-dom";
import userContext from "./utils/userContext";
import { Provider } from "react-redux";
import appStore from "./utils/appStore";
// import Grocery from "./Components/Grocery";
//chunking
//code splitting
//demand loading
//dynamic bundling
//lazy loading
//dynamic import
const Grocery = lazy(() => import("./Components/Grocery"));
const AppLayout = () => {
const [userName, setUserName] = useState();
useEffect(() => {
const data = {
name: userName,
};
setUserName(data.name);
});
return (
<Provider store={appStore}>
<userContext.Provider value={{ loggedInUser: userName, setUserName }}>
<div className="font-serif">
<Header />
<Outlet />
<Footer />
</div>
</userContext.Provider>
</Provider>
);
};
const appRouter = createBrowserRouter([
{
path: "/",
element: <AppLayout />,
children: [
{
path: "/",
element: <Body />,
},
{
path: "/about",
element: <About />,
},
{
path: "/contact",
element: <ContactUs />,
},
{
path: "/grocery",
element: (
<Suspense fallback={<h1>Loading.......</h1>}>
<Grocery />
</Suspense>
),
},
{
path: "/cart",
element: <Cart />,
},
{
path: "/restaurants/:resId",
element: <RestaurantMenu />,
},
],
errorElement: <Error />,
},
]);
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<RouterProvider router={appRouter} />);