Add basic rooting

package.json

@@ -9,6 +9,7 @@
     "fs-extra": "^11.2.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-router-dom": "^6.22.3",
     "react-scripts": "5.0.1",
     "web-vitals": "^2.1.4"
   },

src/App.js

@@ -1,14 +0,0 @@
-import "./App.css";
-
-import Header from "./layouts/Header";
-import logo from "../src/assets/svg/logo.svg";
-
-function App() {
-  return (
-    <>
-      <Header />
-    </>
-  );
-}
-
-export default App;

src/components/Navbar/index.js

@@ -1,23 +1,25 @@
 import "./styles.css";
 
+import { Link } from "react-router-dom";
+
 const Navbar = ({ className, onClick, handleClose }) => {
   return (
     <nav className={`navbar ${className ? className : ""}`}>
       <ul className="navbarList">
         <li className="navbarList__item">
-          <a className="navbar__link" href="#">
+          <Link className="navbar__link" to="/">
             Home
-          </a>
+          </Link>
         </li>
         <li className="navbarList__item">
-          <a className="navbar__link" href="#">
+          <Link className="navbar__link" to="about">
             About
-          </a>
+          </Link>
         </li>
         <li className="navbarList__item">
-          <a className="navbar__link" href="#">
+          <Link className="navbar__link" to="character">
             Hanzo Character Maker
-          </a>
+          </Link>
         </li>
       </ul>
     </nav>

src/index.js

@@ -1,18 +1,22 @@
 import "./index.css";
+import "./app.css";
 
 import React from "react";
 import ReactDOM from "react-dom/client";
+import { BrowserRouter } from "react-router-dom";
 
-import App from "./App";
+import Root from "./pages/Root";
 import reportWebVitals from "./reportWebVitals";
 import { GlobalContextProvider } from "./contexts/GlobalContext";
 
 const root = ReactDOM.createRoot(document.getElementById("root"));
 root.render(
   <React.StrictMode>
-    <GlobalContextProvider>
+    <BrowserRouter>
-      <App />
+      <GlobalContextProvider>
-    </GlobalContextProvider>
+        <Root />
+      </GlobalContextProvider>
+    </BrowserRouter>
   </React.StrictMode>
 );
 

src/layouts/BasicLayout/index.js

@@ -0,0 +1,20 @@
+import "./styles.css";
+
+import { Outlet } from "react-router-dom";
+
+import Footer from "../Footer";
+import Header from "../Header";
+
+const BasicLayout = () => {
+  return (
+    <>
+      <Header />
+      <main className="main">
+        <Outlet />
+      </main>
+      <Footer />
+    </>
+  );
+};
+
+export default BasicLayout;

src/layouts/BasicLayout/styles.css

@@ -0,0 +1 @@
+.main {}

src/layouts/Footer/index.js

@@ -1,7 +1,7 @@
-import './styles.css';
+import "./styles.css";
 
 const Footer = () => {
-  return <div className="footer"></div>;
+  return <footer className="footer"></footer>;
 };
 
 export default Footer;

src/pages/About/index.js

@@ -0,0 +1,11 @@
+import "./styles.css";
+
+import BasicLayout from "../../layouts/BasicLayout";
+import Footer from "../../layouts/Footer";
+import Header from "../../layouts/Header";
+
+const About = () => {
+  return <div className="about">ABOUT</div>;
+};
+
+export default About;

src/pages/About/styles.css

@@ -0,0 +1 @@
+.about {}

src/pages/Character/index.js

@@ -0,0 +1,7 @@
+import "./styles.css";
+
+const Character = () => {
+  return <div className="character">character</div>;
+};
+
+export default Character;

src/pages/Character/styles.css

@@ -0,0 +1 @@
+.character {}

src/pages/Home/index.js

@@ -1,7 +1,7 @@
-import './styles.css';
+import "./styles.css";
 
 const Home = () => {
-  return <div className="home"></div>;
+  return <div className="home">home</div>;
 };
 
 export default Home;

src/pages/Root/index.js

@@ -0,0 +1,21 @@
+import { Route, Routes } from "react-router-dom";
+
+import About from "../About";
+import BasicLayout from "../../layouts/BasicLayout";
+import Character from "../Character";
+import Home from "../Home";
+
+const Root = () => {
+  return (
+    <Routes>
+      <Route path="/" element={<BasicLayout />}>
+        <Route index element={<Home />} />
+        <Route path="about" element={<About />} />
+        <Route path="character" element={<Character />} />
+        <Route path="*" element={<>ERROR 404</>} />
+      </Route>
+    </Routes>
+  );
+};
+
+export default Root;