feat: setup route

package.json

@@ -22,6 +22,7 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-redux": "^8.0.4",
+    "react-router-dom": "^6.4.5",
     "react-scripts": "5.0.1",
     "sass": "^1.55.0",
     "typescript": "^4.8.4",

src/components/Loading/index.tsx

 import { CircularProgress } from "@mui/material";
+import { useAppSelector } from "app/hooks";
+import { globalSelector } from "app/selectors";
 import React from "react";
 
-type Props = {
-  isOpen: boolean;
-};
+const Loading = () => {
+  const { isLoading } = useAppSelector(globalSelector);
 
-const Loading = ({ isOpen }: Props) => {
   return (
-    <div className={`loading${isOpen ? " loading-open" : ""}`}>
+    <div className={`loading${isLoading ? " loading-open" : ""}`}>
       <CircularProgress />
     </div>
   );

src/components/MainLayout/index.tsx

+import Header from "components/Header";
+import { PageUrl } from "configuration/enum";
+import React, { useEffect } from "react";
+import { Outlet, useLocation, useNavigate } from "react-router-dom";
+
+const MainLayout = () => {
+  const location = useLocation();
+  const navigate = useNavigate();
+
+  useEffect(() => {
+    if (location.pathname === PageUrl.ROOT) {
+      navigate(PageUrl.HOMEPAGE);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [location]);
+
+  return (
+    <div className="main-layout">
+      <Header />
+      <Outlet />
+    </div>
+  );
+};
+
+export default MainLayout;

src/configuration/enum.ts

+export const enum PageUrl {
+  ROOT = "/",
+  HOMEPAGE = "/home",
+  NEWS_DETAIL = "/newspaper/:id",
+  ALL = "*",
+}

src/index.tsx

 import React from "react";
 import ReactDOM from "react-dom/client";
 import { Provider } from "react-redux/es/exports";
+import Routers from "routers";
 import store from "./app/store";
-import Header from "./components/Header";
-import MainPage from "./pages/home/MainPage";
 import "./_styles.scss";
 
 const root = ReactDOM.createRoot(
@@ -11,10 +10,7 @@ const root = ReactDOM.createRoot(
 );
 root.render(
   <Provider store={store}>
-    <>
-      <Header />
-      <MainPage />
-    </>
+    <Routers />
   </Provider>
 );
 

src/pages/NewsDetail/index.tsx

+import React from "react";
+
+const NewsDetail = () => {
+  return <div>NewsDetail</div>;
+};
+
+export default NewsDetail;

src/pages/home/mainPage.scss → src/pages/home/HomePage.scss

 @use "styles/index" as *;
 
-.mainPage {
+.homePage {
   padding: 40px 0;
 
   &-title {

src/pages/home/MainPage.tsx → src/pages/home/index.tsx

 import { handleLoading } from "app/globalSlice";
 import { useAppDispatch, useAppSelector } from "app/hooks";
-import { globalSelector, homeSelector } from "app/selectors";
-import Loading from "components/Loading";
+import { homeSelector } from "app/selectors";
 import WrapperContainer from "components/WrapperContainer";
 import React, { useEffect } from "react";
 import Newspaper from "../../components/Newspaper";
 import { getNews } from "./homePageSlice";
 
-const MainPage = () => {
+const HomePage = () => {
   const dispatch = useAppDispatch();
-  const { isLoading } = useAppSelector(globalSelector);
   const { newsData } = useAppSelector(homeSelector);
 
   useEffect(() => {
@@ -29,13 +27,12 @@ const MainPage = () => {
   }, []);
 
   return (
-    <main className="mainPage">
-      <Loading isOpen={isLoading} />
+    <main className="homePage">
       <WrapperContainer>
-        <div className="mainPage-title">
+        <div className="homePage-title">
           <h1>Tin mới nhất</h1>
         </div>
-        <div className="mainPage-list row">
+        <div className="homePage-list row">
           {newsData.map((newspaper, idx) => (
             <div className={`col-${idx === 0 ? 12 : 4}`} key={newspaper.id}>
               <Newspaper data={newspaper} firstNews={idx === 0} />
@@ -47,4 +44,4 @@ const MainPage = () => {
   );
 };
 
-export default MainPage;
+export default HomePage;

src/routers/index.tsx

+import Loading from "components/Loading";
+import MainLayout from "components/MainLayout";
+import { PageUrl } from "configuration/enum";
+import HomePage from "pages/home";
+import NewsDetail from "pages/NewsDetail";
+import React from "react";
+import {
+  BrowserRouter as Router,
+  Routes,
+  Route,
+  Navigate,
+} from "react-router-dom";
+
+const Routers = () => {
+  return (
+    <Router>
+      <Loading />
+      <Routes>
+        <Route path={PageUrl.ROOT} element={<MainLayout />}>
+          <Route path={PageUrl.HOMEPAGE} element={<HomePage />} />
+          <Route path={PageUrl.NEWS_DETAIL} element={<NewsDetail />} />
+          <Route
+            path={PageUrl.ALL}
+            element={<Navigate to={PageUrl.HOMEPAGE} replace />}
+          />
+        </Route>
+      </Routes>
+    </Router>
+  );
+};
+
+export default Routers;

src/styles/pages.scss

-@use "pages/home/mainPage.scss";
+@use "pages/home/HomePage.scss";
+@use "pages/NewsDetail/NewsDetail.scss";