New folder structure

src/App.js

@@ -1,49 +1,16 @@
-import styles from "./App.module.scss";
+import { BrowserRouter as Router, Switch, Route /*Link*/ } from "react-router-dom";
-import {
+import { Home } from "./pages/Home";
-    BrowserRouter as Router,
+import { About } from "./pages/About";
-    Switch,
+import { Users } from "./pages/Users";
-    Route,
+
-    Link
+export const App = () => {
-  } from "react-router-dom";
-  import Stack from 'react-bootstrap/Stack'
-  import Container from 'react-bootstrap/Container'
-  import Logo from "./components/Logo/index.js";
-  export default function App() {
     return (
-      <Router>
+        <Router>
-        <div>
+            <Switch>
-          {/* A <Switch> looks through its children <Route>s and
+                <Route path="/about" component={About} />
-              renders the first one that matches the current URL. */}
+                <Route path="/users" component={Users} />
-          <Switch>
+                <Route path="/" component={Home} />
-            <Route path="/about">
+            </Switch>
-              <About />
+        </Router>
-            </Route>
-            <Route path="/users">
-              <Users />
-            </Route>
-            <Route path="/">
-              <Home />
-            </Route>
-          </Switch>
-        </div>
-      </Router>
     );
-  }
+};
-  
-  function Home() {
-    return (
-    <div className={styles.con}>      <Stack gap={1}>
-      <div className={styles.item}>First item</div>
-      <div className={styles.item}>Second item</div>
-      <div className={styles.item}>Third item</div>
-    </Stack></div>
-    );
-  }
-  
-  function About() {
-    return <Logo/>;
-  }
-  
-  function Users() {
-    return <h2>Users</h2>;
-  }

src/App.module.scss

@@ -1,13 +0,0 @@
-@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700&display=swap');
-.item{
-   border:1px solid black;
-   width:70vw;
-   max-width:500px;
-   margin:0 auto;
-}
-.con{
-   text-align: center;
-    width:90%;
-    margin:0 auto;
-    font-family: 'Poppins', sans-serif;
-}

src/index.js

@@ -1,8 +1,9 @@
 import React from "react";
 import ReactDOM from "react-dom";
 import "./index.scss";
-import App from "./App.js";
+import { App } from "./App.js";
-import 'bootstrap/dist/css/bootstrap.min.css';
+import "bootstrap/dist/css/bootstrap.min.css";
+
 ReactDOM.render(
     <React.StrictMode>
         <App />

src/index.scss

@@ -2,6 +2,8 @@ $accent: #53d188;
 $bggray: #e8e8e8;
 $bg: #ffffff;
 
+@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700&display=swap");
+
 * {
     margin: 0;
     padding: 0;

src/pages/About/index.js

@@ -0,0 +1,6 @@
+// import styles from "./index.module.scss";
+import Logo from "../../components/Logo";
+
+export const About = () => {
+    return <Logo></Logo>;
+};

src/pages/Home/index.js

@@ -0,0 +1,15 @@
+import { Stack } from "react-bootstrap";
+import styles from "./index.module.scss";
+
+export const Home = () => {
+    return (
+        <div className={styles.con}>
+            {" "}
+            <Stack gap={1}>
+                <div className={styles.item}>First item</div>
+                <div className={styles.item}>Second item</div>
+                <div className={styles.item}>Third item</div>
+            </Stack>
+        </div>
+    );
+};

src/pages/Home/index.module.scss

@@ -0,0 +1,12 @@
+.item {
+    border: 1px solid black;
+    width: 70vw;
+    max-width: 500px;
+    margin: 0 auto;
+}
+.con {
+    text-align: center;
+    width: 90%;
+    margin: 0 auto;
+    font-family: "Poppins", sans-serif;
+}

src/pages/Users/index.js

@@ -0,0 +1,5 @@
+// import styles from './index.module.scss';
+
+export const Users = () => {
+    return <h2>Users</h2>;
+};