stable initial pages

Author: kubil-ismail

package-lock.json

@@ -12,6 +12,7 @@
     "@testing-library/user-event": "^13.3.0",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
+    "react-helmet": "^6.1.0",
     "react-redux": "^7.2.5",
     "react-router-dom": "^5.3.0",
     "react-scripts": "4.0.3",

package.json

@@ -1,5 +1,6 @@
 import React, { Suspense } from "react";
 import Routes from "./routes";
+import { Helmet } from "react-helmet";
 import { BrowserRouter as Router, Switch, Route } from "react-router-dom";
 // @custome component
 import MainBackdrop from "components/backdrop";
@@ -9,18 +10,30 @@ function App() {
     <Suspense fallback={<MainBackdrop open />}>
       <Router>
         {/* 
-          A <Switch> looks through its children <Route>s and
+          A <Switch> looks through its children <Route> and
           renders the first one that matches the current URL. 
         */}
         <Switch>
-          {Routes.map((val, key) => (
-            <Route
-              key={key}
-              component={val.component}
-              path={val.path}
-              exact={val.exact}
-            />
-          ))}
+          {Routes.map((val, key) => {
+            const Components = val.component;
+            return (
+              <Route
+                key={key}
+                path={val.path}
+                exact={val.exact}
+                render={(props) => {
+                  return (
+                    <>
+                      <Helmet>
+                        <title>{val?.name} - Your App</title>
+                      </Helmet>
+                      <Components {...props} pageParam={val} />
+                    </>
+                  );
+                }}
+              />
+            );
+          })}
         </Switch>
       </Router>
     </Suspense>

public/vector/home.png

@@ -27,13 +27,13 @@ const Routes = [
   {
     path: "/something-wrong",
     component: React.lazy(() => import("pages/500")),
-    name: "SOMETHING WRONG",
+    name: "Something Wrong",
     exact: true,
   },
   {
     path: "*",
     component: React.lazy(() => import("pages/404")),
-    name: "PAGE NOT FOUND",
+    name: "Page not found",
     exact: true,
   },
 ];

src/app/app.js

@@ -3,12 +3,7 @@ import ReactDOM from "react-dom";
 import Root from "app/root";
 import reportWebVitals from "./reportWebVitals";
 
-ReactDOM.render(
-  <React.StrictMode>
-    <Root />
-  </React.StrictMode>,
-  document.getElementById("root")
-);
+ReactDOM.render(<Root />, document.getElementById("root"));
 
 // If you want to start measuring performance in your app, pass a function
 // to log results (for example: reportWebVitals(console.log))

src/app/routes.js

@@ -36,7 +36,7 @@ export default function Main() {
       <Text gutterBottom>
         We can't seem to find the pages you're looking for.
       </Text>
-      <Button variant="contained" size="small" onClick={loadPages}>
+      <Button variant="contained" onClick={loadPages}>
         Go Back
       </Button>
     </Box>

src/index.js

@@ -33,7 +33,7 @@ export default function Main() {
         Something went wrong
       </Text>
       <Text gutterBottom>Looks like server failed to load yout request</Text>
-      <Button variant="contained" size="small" onClick={loadPages}>
+      <Button variant="contained" onClick={loadPages}>
         Reload Pages
       </Button>
     </Box>

src/pages/404.js

@@ -1,12 +1,32 @@
 import React, { memo } from "react";
 import { connect } from "react-redux";
 import Text from "@mui/material/Typography";
+import Button from "@mui/material/Button";
+import Box from "@mui/material/Box";
 
 function Home(props) {
   return (
-    <>
-      <Text>HENLO</Text>
-    </>
+    <Box
+      height="100vh"
+      width="100vw"
+      display="flex"
+      alignItems="center"
+      justifyContent="center"
+      flexDirection="column"
+    >
+      <img width="350px" src="/vector/home.png" alt="vector" />
+      <Text align="center" variant="h4" gutterBottom>
+        Welcome to React Starterkit
+      </Text>
+      <Text align="center" gutterBottom>
+        Get started by editing pages/Home.js
+      </Text>
+      <Box display="flex" justifyContent="center">
+        <Button color="primary" variant="outlined">
+          See Documentation
+        </Button>
+      </Box>
+    </Box>
   );
 }
 

src/pages/500.js

@@ -73,6 +73,7 @@ const mainTheme = createTheme({
     MuiButton: {
       defaultProps: {
         disableElevation: true,
+        size: "small"
       },
     },
   },