cra-template-flaxdev/template/src/App.js

This template package just for used for setup full based CRA projects, Flax's DevTeam - HCMUSSH

import logo from "./logo.svg";
import "./App.css";
import "bootstrap/dist/css/bootstrap.min.css";
import { publicRoutes } from "./routers";
// import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
// import DashboardLayout from "./components/Layout/DashboardLayout";

// import DangNhap from "./pages/DangNhap/DangNhap";
// import { HelmetProvider } from "react-helmet-async";

function App() {
  return (
    // "Router" sẽ quản lý các route của ứng dụng
    <HelmetProvider>
      <Router>
        {/* // "Routes" sẽ quản lý các route con của Router */}
        <Routes>
          {/* // "Route" sẽ quản lý các path của các trang */}
          {/* // element sẽ quản lý component được render ra màn hình */}
          <Route path="/dang-nhap" element={<DangNhap />} />
          <Route path="/" element={<DashboardLayout />}>
            {/* // Duyệt qua mảng publicRoutes để render ra các route */}
            {publicRoutes.map((route, index) => {
              return (
                // Mỗi Route này sẽ là 1 trang riêng biệt
                <Route
                  key={index}
                  path={route.path}
                  element={<route.component />}
                  // exact: true nếu path phải chính xác với path của route
                  exact={route.exact}
                />
              );
            })}
          </Route>
          <Route path="*" element={<h1>404</h1>} />
        </Routes>
      </Router>
    </HelmetProvider>
  );
}

export default App;