Skip to content

Commit 05b85fe

Browse files
author
Endo
committed
upgrad react-router-dom version, and fix routes with its new feature
1 parent 2e2acfc commit 05b85fe

8 files changed

Lines changed: 65 additions & 75 deletions

File tree

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@
1818
"react": "^18.2.0",
1919
"react-dom": "^18.2.0",
2020
"react-redux": "^8.0.2",
21-
"react-router-dom": "^6.3.0",
21+
"react-router-dom": "^6.9.0",
2222
"react-slick": "^0.29.0",
2323
"react-use": "^17.4.0",
2424
"slick-carousel": "^1.8.1",

‎src/App.tsx‎

Lines changed: 0 additions & 19 deletions
This file was deleted.

‎src/components/Logo.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
11
import Box, { BoxProps } from "@mui/material/Box";
22
import { Link as RouterLink } from "react-router-dom";
3-
import { MAIN_PATH } from "src/routes/paths";
3+
import { MAIN_PATH } from "src/constant";
44

55
export default function Logo({ sx }: BoxProps) {
66
return (
7-
<RouterLink to={MAIN_PATH.browse}>
7+
<RouterLink to={`/${MAIN_PATH.browse}`}>
88
<Box
99
component="img"
1010
alt="Netflix Logo"

‎src/constant/index.ts‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,12 @@ import { CustomGenre } from "src/types/Genre";
33
export const API_ENDPOINT_URL = import.meta.env.VITE_APP_API_ENDPOINT_URL;
44
export const TMDB_V3_API_KEY = import.meta.env.VITE_APP_TMDB_V3_API_KEY;
55

6+
export const MAIN_PATH = {
7+
root: "",
8+
browse: "browse",
9+
genreExplore: "genre",
10+
};
11+
612
export const ARROW_MAX_WIDTH = 60;
713
export const COMMON_TITLES: CustomGenre[] = [
814
{ name: "Popular", apiString: "popular" },

‎src/main.tsx‎

Lines changed: 17 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -4,13 +4,15 @@ import "./CustomClassNameSetup";
44
import React from "react";
55
import ReactDOM from "react-dom/client";
66
import { Provider } from "react-redux";
7-
import { BrowserRouter } from "react-router-dom";
7+
import { RouterProvider } from "react-router-dom";
88
import { createTheme, ThemeProvider } from "@mui/material/styles";
9+
import Box from "@mui/material/Box";
910

1011
import store from "./store";
1112
import { extendedApi } from "./store/slices/configuration";
1213
import palette from "./theme/palette";
13-
import App from "./App";
14+
import router from "./routes";
15+
import MainLoadingScreen from "./components/MainLoadingScreen";
1416

1517
store.dispatch(extendedApi.endpoints.getConfiguration.initiate(undefined));
1618

@@ -20,11 +22,21 @@ const root = ReactDOM.createRoot(
2022
root.render(
2123
<Provider store={store}>
2224
<React.StrictMode>
23-
<BrowserRouter>
2425
<ThemeProvider theme={createTheme({ palette })}>
25-
<App />
26+
<Box
27+
sx={{
28+
width: "100%",
29+
height: "100vh",
30+
bgcolor: "background.default",
31+
position: "relative",
32+
}}
33+
>
34+
<RouterProvider
35+
router={router}
36+
fallbackElement={<MainLoadingScreen />}
37+
/>
38+
</Box>
2639
</ThemeProvider>
27-
</BrowserRouter>
2840
</React.StrictMode>
2941
</Provider>
3042
);

‎src/routes/index.tsx‎

Lines changed: 24 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
import { ElementType, lazy, Suspense } from "react";
2-
import { Navigate, useRoutes } from "react-router-dom";
2+
import { Navigate, createBrowserRouter } from "react-router-dom";
33
import MainLoadingScreen from "src/components/MainLoadingScreen";
4+
import { MAIN_PATH } from "src/constant";
45

56
import MainLayout from "src/layouts/MainLayout";
6-
import { MAIN_PATH } from "./paths";
77

88
const Loadable = (Component: ElementType) => (props: any) => {
99
return (
@@ -16,23 +16,25 @@ const Loadable = (Component: ElementType) => (props: any) => {
1616
const HomePage = Loadable(lazy(() => import("src/pages/HomePage")));
1717
const GenreExplorePage = Loadable(lazy(() => import("src/pages/GenreExplore")));
1818

19-
function MainRoutes() {
20-
return useRoutes([
21-
{
22-
path: "/",
23-
element: <MainLayout />,
24-
children: [
25-
{ path: "", element: <Navigate to={MAIN_PATH.browse} /> },
26-
{
27-
path: "browse",
28-
element: <HomePage />,
29-
},
30-
{
31-
path: "genre",
32-
children: [{ path: ":genreId", element: <GenreExplorePage /> }],
33-
},
34-
],
35-
},
36-
]);
37-
}
38-
export default MainRoutes;
19+
const router = createBrowserRouter([
20+
{
21+
path: "/",
22+
element: <MainLayout />,
23+
children: [
24+
{
25+
path: MAIN_PATH.root,
26+
element: <Navigate to={`/${MAIN_PATH.browse}`} />,
27+
},
28+
{
29+
path: MAIN_PATH.browse,
30+
element: <HomePage />,
31+
},
32+
{
33+
path: MAIN_PATH.genreExplore,
34+
children: [{ path: ":genreId", element: <GenreExplorePage /> }],
35+
},
36+
],
37+
},
38+
]);
39+
40+
export default router;

‎src/routes/paths.ts‎

Lines changed: 0 additions & 11 deletions
This file was deleted.

‎yarn.lock‎

Lines changed: 15 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -597,10 +597,10 @@
597597
redux-thunk "^2.4.1"
598598
reselect "^4.1.5"
599599

600-
"@remix-run/router@1.0.2":
601-
version "1.0.2"
602-
resolved "https://registry.yarnpkg.com/@remix-run/router/-/router-1.0.2.tgz#1c17eadb2fa77f80a796ad5ea9bf108e6993ef06"
603-
integrity sha512-GRSOFhJzjGN+d4sKHTMSvNeUPoZiDHWmRnXfzaxrqe7dE/Nzlc8BiMSJdLDESZlndM7jIUrZ/F4yWqVYlI0rwQ==
600+
"@remix-run/router@1.4.0":
601+
version "1.4.0"
602+
resolved "https://registry.yarnpkg.com/@remix-run/router/-/router-1.4.0.tgz#74935d538e4df8893e47831a7aea362f295bcd39"
603+
integrity sha512-BJ9SxXux8zAg991UmT8slpwpsd31K1dHHbD3Ba4VzD+liLQ4WAMSxQp2d2ZPRPfN0jN2NPRowcSSoM7lCaF08Q==
604604

605605
"@types/hoist-non-react-statics@^3.3.1":
606606
version "3.3.1"
@@ -1532,20 +1532,20 @@ react-refresh@^0.14.0:
15321532
resolved "https://registry.yarnpkg.com/react-refresh/-/react-refresh-0.14.0.tgz#4e02825378a5f227079554d4284889354e5f553e"
15331533
integrity sha512-wViHqhAd8OHeLS/IRMJjTSDHF3U9eWi62F/MledQGPdJGDhodXJ9PBLNGr6WWL7qlH12Mt3TyTpbS+hGXMjCzQ==
15341534

1535-
react-router-dom@^6.3.0:
1536-
version "6.4.2"
1537-
resolved "https://registry.yarnpkg.com/react-router-dom/-/react-router-dom-6.4.2.tgz#115b37d501d6d8ac870683694978c51c43e6c0d2"
1538-
integrity sha512-yM1kjoTkpfjgczPrcyWrp+OuQMyB1WleICiiGfstnQYo/S8hPEEnVjr/RdmlH6yKK4Tnj1UGXFSa7uwAtmDoLQ==
1535+
react-router-dom@^6.9.0:
1536+
version "6.9.0"
1537+
resolved "https://registry.yarnpkg.com/react-router-dom/-/react-router-dom-6.9.0.tgz#dd8b4e461453bd4cad2e6404493d1a5b4bfea758"
1538+
integrity sha512-/seUAPY01VAuwkGyVBPCn1OXfVbaWGGu4QN9uj0kCPcTyNYgL1ldZpxZUpRU7BLheKQI4Twtl/OW2nHRF1u26Q==
15391539
dependencies:
1540-
"@remix-run/router" "1.0.2"
1541-
react-router "6.4.2"
1540+
"@remix-run/router" "1.4.0"
1541+
react-router "6.9.0"
15421542

1543-
react-router@6.4.2:
1544-
version "6.4.2"
1545-
resolved "https://registry.yarnpkg.com/react-router/-/react-router-6.4.2.tgz#300628ee9ed81b8ef1597b5cb98b474efe9779b8"
1546-
integrity sha512-Rb0BAX9KHhVzT1OKhMvCDMw776aTYM0DtkxqUBP8dNBom3mPXlfNs76JNGK8wKJ1IZEY1+WGj+cvZxHVk/GiKw==
1543+
react-router@6.9.0:
1544+
version "6.9.0"
1545+
resolved "https://registry.yarnpkg.com/react-router/-/react-router-6.9.0.tgz#0f503d9becbc62d9e4ddc0f9bd4026e0fd29fbf5"
1546+
integrity sha512-51lKevGNUHrt6kLuX3e/ihrXoXCa9ixY/nVWRLlob4r/l0f45x3SzBvYJe3ctleLUQQ5fVa4RGgJOTH7D9Umhw==
15471547
dependencies:
1548-
"@remix-run/router" "1.0.2"
1548+
"@remix-run/router" "1.4.0"
15491549

15501550
react-slick@^0.29.0:
15511551
version "0.29.0"

0 commit comments

Comments
 (0)