리액트 네비게이트 구현

For-React-Master · Nov 9, 2022 · 7048723 · 7048723
1 parent a68db38
commit 7048723
Show file tree

Hide file tree

Showing 3 changed files with 53 additions and 44 deletions.
diff --git a/src/App.js b/src/App.js
@@ -1,52 +1,24 @@
 /* eslint-disable */
-
-import styled from 'styled-components';
-import { useState } from 'react';
-import { Link, useNavigate } from 'react-router-dom';
 import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
 import Blog from './Pages/blog';
 import BSE from './Pages/BSE';
 import SYJ from './Pages/SYJ';
 import JY from './Pages/jy';
 import KNH from './Pages/KNH';
 import KSJ from './Pages/ksj';
-import Welcome from '/Welcome';
-
-const MainWrap = styled.div`
-  position: absolute;
-  width: 100%;
-  height: 25rem;
-  align-items: center;
-  flex-direction: column;
-  display: flex;
-  text-align: center;
-  background-color: darkblue;
-`;
+import Welcome from './Welcome';
 
-const Title = styled.div`
-  color: darkorange;
-  width: 100%;
-  font-size: 8rem;
-`;
-const Name = styled.div`
-  display: flex;
-  font-weight: bold;
-  font-size: 1.5rem;
-  position: relative;
-  bottom: 12rem;
-  font-family: 'Raleway', sans-serif;
-`;
 function App() {
   return (
     <div>
       <Routes>
         <Route path='/Blog' element={<Blog />} />
         <Route path='/' element={<Welcome />} />
-        <Route path='BSE' element={<BSE />} />
-        <Route path='JY' element={<JY />} />
-        <Route path='KNH' element={<KNH />} />
-        <Route path='SYJ' element={<SYJ />} />
-        <Route path='KSJ' element={<KSJ />} />
+        <Route path='/BSE' element={<BSE />} />
+        <Route path='/JY' element={<JY />} />
+        <Route path='/KNH' element={<KNH />} />
+        <Route path='/SYJ' element={<SYJ />} />
+        <Route path='/KSJ' element={<KSJ />} />
       </Routes>
     </div>
   );

diff --git a/src/Welcome.js b/src/Welcome.js
@@ -33,24 +33,58 @@ const Name = styled.div`
   bottom: 12rem;
   font-family: 'Raleway', sans-serif;
 `;
+const Names = styled.div`
+  padding: 5rem;
+`;
 function Welcome() {
+  let navigate = useNavigate();
+
   return (
     <div>
-      <modal></modal>
-      {
-        //   modal == true? <Modal 팀원={팀원} color={'black'} />: null
-      }
       <div>
         <MainWrap>
           <Title>
             <h1>FRM-Team</h1>
           </Title>
           <Name>
-            <div style={{ padding: '5rem' }}>BSE</div>
-            <div style={{ padding: '5rem' }}>KSJ</div>
-            <div style={{ padding: '5rem' }}>LJY</div>
-            <div style={{ padding: '5rem' }}>KNH</div>
-            <div style={{ padding: '5rem' }}>SYJ</div>
+            <Names
+              onClick={() => {
+                navigate('/BSE');
+              }}
+            >
+              {' '}
+              BSE
+            </Names>
+            <Names
+              onClick={() => {
+                navigate('/SYJ');
+              }}
+            >
+              SYJ
+            </Names>
+            <Names
+              onClick={() => {
+                navigate('/KSJ');
+              }}
+            >
+              KSJ
+            </Names>
+            <Names
+              onClick={() => {
+                navigate('/KNH');
+              }}
+            >
+              KNH
+            </Names>
+            <Names
+              onClick={() => {
+                navigate('/LJY');
+              }}
+            >
+              LJY
+            </Names>
+
+            <div></div>
           </Name>
         </MainWrap>
       </div>

diff --git a/src/index.js b/src/index.js
@@ -3,11 +3,14 @@ import ReactDOM from 'react-dom/client';
 import './index.css';
 import App from './App';
 import reportWebVitals from './reportWebVitals';
+import { BrowserRouter } from 'react-router-dom';
 
 const root = ReactDOM.createRoot(document.getElementById('root'));
 root.render(
   <React.StrictMode>
-    <App />
+    <BrowserRouter>
+      <App />
+    </BrowserRouter>
   </React.StrictMode>
 );