upgrad react-router-dom version, and fix routes with its new feature

package.json

@@ -18,7 +18,7 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-redux": "^8.0.2",
-    "react-router-dom": "^6.3.0",
+    "react-router-dom": "^6.9.0",
     "react-slick": "^0.29.0",
     "react-use": "^17.4.0",
     "slick-carousel": "^1.8.1",

src/components/Logo.tsx

@@ -1,10 +1,10 @@
 import Box, { BoxProps } from "@mui/material/Box";
 import { Link as RouterLink } from "react-router-dom";
-import { MAIN_PATH } from "src/routes/paths";
+import { MAIN_PATH } from "src/constant";
 
 export default function Logo({ sx }: BoxProps) {
   return (
-    <RouterLink to={MAIN_PATH.browse}>
+    <RouterLink to={`/${MAIN_PATH.browse}`}>
       <Box
         component="img"
         alt="Netflix Logo"

src/constant/index.ts

@@ -3,6 +3,12 @@ import { CustomGenre } from "src/types/Genre";
 export const API_ENDPOINT_URL = import.meta.env.VITE_APP_API_ENDPOINT_URL;
 export const TMDB_V3_API_KEY = import.meta.env.VITE_APP_TMDB_V3_API_KEY;
 
+export const MAIN_PATH = {
+  root: "",
+  browse: "browse",
+  genreExplore: "genre",
+};
+
 export const ARROW_MAX_WIDTH = 60;
 export const COMMON_TITLES: CustomGenre[] = [
   { name: "Popular", apiString: "popular" },

src/main.tsx

@@ -4,13 +4,15 @@ import "./CustomClassNameSetup";
 import React from "react";
 import ReactDOM from "react-dom/client";
 import { Provider } from "react-redux";
-import { BrowserRouter } from "react-router-dom";
+import { RouterProvider } from "react-router-dom";
 import { createTheme, ThemeProvider } from "@mui/material/styles";
+import Box from "@mui/material/Box";
 
 import store from "./store";
 import { extendedApi } from "./store/slices/configuration";
 import palette from "./theme/palette";
-import App from "./App";
+import router from "./routes";
+import MainLoadingScreen from "./components/MainLoadingScreen";
 
 store.dispatch(extendedApi.endpoints.getConfiguration.initiate(undefined));
 
@@ -20,11 +22,21 @@ const root = ReactDOM.createRoot(
 root.render(
   <Provider store={store}>
     <React.StrictMode>
-    <BrowserRouter>
       <ThemeProvider theme={createTheme({ palette })}>
-        <App />
+        <Box
+          sx={{
+            width: "100%",
+            height: "100vh",
+            bgcolor: "background.default",
+            position: "relative",
+          }}
+        >
+          <RouterProvider
+            router={router}
+            fallbackElement={<MainLoadingScreen />}
+          />
+        </Box>
       </ThemeProvider>
-    </BrowserRouter>
     </React.StrictMode>
   </Provider>
 );

src/routes/index.tsx

@@ -1,9 +1,9 @@
 import { ElementType, lazy, Suspense } from "react";
-import { Navigate, useRoutes } from "react-router-dom";
+import { Navigate, createBrowserRouter } from "react-router-dom";
 import MainLoadingScreen from "src/components/MainLoadingScreen";
+import { MAIN_PATH } from "src/constant";
 
 import MainLayout from "src/layouts/MainLayout";
-import { MAIN_PATH } from "./paths";
 
 const Loadable = (Component: ElementType) => (props: any) => {
   return (
@@ -16,23 +16,25 @@ const Loadable = (Component: ElementType) => (props: any) => {
 const HomePage = Loadable(lazy(() => import("src/pages/HomePage")));
 const GenreExplorePage = Loadable(lazy(() => import("src/pages/GenreExplore")));
 
-function MainRoutes() {
-  return useRoutes([
-    {
-      path: "/",
-      element: <MainLayout />,
-      children: [
-        { path: "", element: <Navigate to={MAIN_PATH.browse} /> },
-        {
-          path: "browse",
-          element: <HomePage />,
-        },
-        {
-          path: "genre",
-          children: [{ path: ":genreId", element: <GenreExplorePage /> }],
-        },
-      ],
-    },
-  ]);
-}
-export default MainRoutes;
+const router = createBrowserRouter([
+  {
+    path: "/",
+    element: <MainLayout />,
+    children: [
+      {
+        path: MAIN_PATH.root,
+        element: <Navigate to={`/${MAIN_PATH.browse}`} />,
+      },
+      {
+        path: MAIN_PATH.browse,
+        element: <HomePage />,
+      },
+      {
+        path: MAIN_PATH.genreExplore,
+        children: [{ path: ":genreId", element: <GenreExplorePage /> }],
+      },
+    ],
+  },
+]);
+
+export default router;

yarn.lock

@@ -597,10 +597,10 @@
     redux-thunk "^2.4.1"
     reselect "^4.1.5"
 
-"@remix-run/router@1.0.2":
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/@remix-run/router/-/router-1.0.2.tgz#1c17eadb2fa77f80a796ad5ea9bf108e6993ef06"
-  integrity sha512-GRSOFhJzjGN+d4sKHTMSvNeUPoZiDHWmRnXfzaxrqe7dE/Nzlc8BiMSJdLDESZlndM7jIUrZ/F4yWqVYlI0rwQ==
+"@remix-run/router@1.4.0":
+  version "1.4.0"
+  resolved "https://registry.yarnpkg.com/@remix-run/router/-/router-1.4.0.tgz#74935d538e4df8893e47831a7aea362f295bcd39"
+  integrity sha512-BJ9SxXux8zAg991UmT8slpwpsd31K1dHHbD3Ba4VzD+liLQ4WAMSxQp2d2ZPRPfN0jN2NPRowcSSoM7lCaF08Q==
 
 "@types/hoist-non-react-statics@^3.3.1":
   version "3.3.1"
@@ -1532,20 +1532,20 @@ react-refresh@^0.14.0:
   resolved "https://registry.yarnpkg.com/react-refresh/-/react-refresh-0.14.0.tgz#4e02825378a5f227079554d4284889354e5f553e"
   integrity sha512-wViHqhAd8OHeLS/IRMJjTSDHF3U9eWi62F/MledQGPdJGDhodXJ9PBLNGr6WWL7qlH12Mt3TyTpbS+hGXMjCzQ==
 
-react-router-dom@^6.3.0:
-  version "6.4.2"
-  resolved "https://registry.yarnpkg.com/react-router-dom/-/react-router-dom-6.4.2.tgz#115b37d501d6d8ac870683694978c51c43e6c0d2"
-  integrity sha512-yM1kjoTkpfjgczPrcyWrp+OuQMyB1WleICiiGfstnQYo/S8hPEEnVjr/RdmlH6yKK4Tnj1UGXFSa7uwAtmDoLQ==
+react-router-dom@^6.9.0:
+  version "6.9.0"
+  resolved "https://registry.yarnpkg.com/react-router-dom/-/react-router-dom-6.9.0.tgz#dd8b4e461453bd4cad2e6404493d1a5b4bfea758"
+  integrity sha512-/seUAPY01VAuwkGyVBPCn1OXfVbaWGGu4QN9uj0kCPcTyNYgL1ldZpxZUpRU7BLheKQI4Twtl/OW2nHRF1u26Q==
   dependencies:
-    "@remix-run/router" "1.0.2"
-    react-router "6.4.2"
+    "@remix-run/router" "1.4.0"
+    react-router "6.9.0"
 
-react-router@6.4.2:
-  version "6.4.2"
-  resolved "https://registry.yarnpkg.com/react-router/-/react-router-6.4.2.tgz#300628ee9ed81b8ef1597b5cb98b474efe9779b8"
-  integrity sha512-Rb0BAX9KHhVzT1OKhMvCDMw776aTYM0DtkxqUBP8dNBom3mPXlfNs76JNGK8wKJ1IZEY1+WGj+cvZxHVk/GiKw==
+react-router@6.9.0:
+  version "6.9.0"
+  resolved "https://registry.yarnpkg.com/react-router/-/react-router-6.9.0.tgz#0f503d9becbc62d9e4ddc0f9bd4026e0fd29fbf5"
+  integrity sha512-51lKevGNUHrt6kLuX3e/ihrXoXCa9ixY/nVWRLlob4r/l0f45x3SzBvYJe3ctleLUQQ5fVa4RGgJOTH7D9Umhw==
   dependencies:
-    "@remix-run/router" "1.0.2"
+    "@remix-run/router" "1.4.0"
 
 react-slick@^0.29.0:
   version "0.29.0"