Merge pull request #2 from SW-Palindrome/feature/initial-route

라우터 적용

package.json

@@ -5,6 +5,7 @@
   "dependencies": {
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-router-dom": "^6.21.3",
     "react-scripts": "5.0.1",
     "web-vitals": "^2.1.4"
   },

src/App.js

@@ -1,24 +1,21 @@
-import logo from "./logo.svg";
+import { Routes, Route } from "react-router-dom";
 import "./App.css";
 
+import Home from "./pages/Home/Home";
+import Splash from "./pages/Splash/Splash";
+import Calendar from "./pages/Calendar/Calendar";
+import Mystudy from "./pages/Mystudy/Mystudy";
+import Settings from "./pages/Settings/Settings";
+
 function App() {
   return (
-    <div className="App">
-      <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
-        <p>
-          Edit <code>src/App.js</code> and save to reload.
-        </p>
-        <a
-          className="App-link"
-          href="https://reactjs.org"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          learn react
-        </a>
-      </header>
-    </div>
+    <Routes>
+      <Route path="/" element={<Home />} />
+      <Route path="/splash" element={<Splash />} />
+      <Route path="/calendar" element={<Calendar />} />
+      <Route path="/mystudy" element={<Mystudy />} />
+      <Route path="/settings" element={<Settings />} />
+    </Routes>
   );
 }
 

src/index.js

@@ -2,13 +2,16 @@ import React from "react";
 import ReactDOM from "react-dom";
 import "./index.css";
 import App from "./App";
+import { BrowserRouter } from "react-router-dom";
 import reportWebVitals from "./reportWebVitals";
 
 const root = ReactDOM.createRoot(document.getElementById("root"));
 root.render(
-  <React.StrictMode>
+  //<React.StrictMode>
+  <BrowserRouter>
     <App />
-  </React.StrictMode>,
+  </BrowserRouter>,
+  //</React.StrictMode>,
 );
 
 // If you want to start measuring performance in your app, pass a function

src/pages/calendar/calendar.js

@@ -0,0 +1,9 @@
+function Calendar() {
+  return (
+    <div>
+      <h1>Calendar</h1>
+    </div>
+  );
+}
+
+export default Calendar;

src/pages/home/home.js

@@ -0,0 +1,9 @@
+function Home() {
+  return (
+    <div>
+      <h1>Home</h1>
+    </div>
+  );
+}
+
+export default Home;

src/pages/mystudy/mystudy.js

@@ -0,0 +1,9 @@
+function Mystudy() {
+  return (
+    <div>
+      <h1>Mystudy</h1>
+    </div>
+  );
+}
+
+export default Mystudy;

src/pages/settings/settings.js

@@ -0,0 +1,9 @@
+function Settings() {
+  return (
+    <div>
+      <h1>Settings</h1>
+    </div>
+  );
+}
+
+export default Settings;

src/pages/splash/splash.js

@@ -0,0 +1,9 @@
+function Splash() {
+  return (
+    <div>
+      <h1>Splash</h1>
+    </div>
+  );
+}
+
+export default Splash;