Updated template with TS fixes

src/app/Router.tsx

@@ -1,8 +1,12 @@
 import { useRoutes } from "react-router-dom"
+import * as pages from "./pages"
+import Helper from "./utils/helper"
 import ROUTES from "./routes"
 
+Helper.populateComponentsInRoutes(ROUTES, pages)
+
 interface RouterProps {}
 
-const Router = (props: RouterProps) => useRoutes(ROUTES)
+const Router = (props: RouterProps): JSX.Element | null => useRoutes(ROUTES)
 
 export default Router

src/app/static/styles/global.scss

@@ -0,0 +1,18 @@
+html, body, #root {
+	height: 100%;
+	width: 100%;
+}
+
+body {
+  margin: 0;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
+    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
+    sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+code {
+  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
+    monospace;
+}

src/app/types/route.d.ts

@@ -0,0 +1,6 @@
+interface RouteConfig {
+  path: String
+  class: String
+  element: String | JSX.Element | null
+  children?: RouteConfig[]
+}

src/app/utils/helper.js

@@ -1,14 +0,0 @@
-class Helper {
-  static populateComponentsInRoutes(routes, components) {
-    while (routes) {
-      routes.forEach((route) => {
-        route.element = components[route.element]
-        if (route.children) {
-          Helper.populateComponentsInRoutes(route.children, components)
-        }
-      })
-    }
-  }
-}
-
-export default Helper

src/app/utils/helper.tsx

@@ -0,0 +1,15 @@
+class Helper {
+  static populateComponentsInRoutes(routes: RouteConfig[], components: any) {
+    routes &&
+      routes.forEach((route) => {
+        const Component: JSX.ElementType =
+          components[route.element as keyof object]
+        route.element = <Component />
+        if (route.children) {
+          Helper.populateComponentsInRoutes(route.children, components)
+        }
+      })
+  }
+}
+
+export default Helper

src/index.tsx

@@ -1,5 +1,6 @@
 import React from "react"
 import ReactDOM from "react-dom/client"
+import { BrowserRouter } from "react-router-dom"
 import { Provider } from "react-redux"
 import { store } from "./app/store"
 import Router from "./app/Router"
@@ -9,8 +10,10 @@ const root = ReactDOM.createRoot(document.getElementById("root") as HTMLElement)
 
 root.render(
   <React.StrictMode>
-    <Provider store={store}>
-      <Router />
-    </Provider>
-  </React.StrictMode>
-)
+    <BrowserRouter>
+      <Provider store={store}>
+        <Router />
+      </Provider>
+    </BrowserRouter>
+  </React.StrictMode>,
+)