import { Link } from "react-router-dom";
import React from "react";
import './NavBar.css'
function NavBar(){
return(
<div>
<div className="navbar">
<Link className="navbarMenu" to={'/Introduction'}>소개</Link>
#가고자 하는 페이지를 '/'뒤에 추가 -> {'/Introduction'}
<Link className="navbarMenu" to={'/'}>홈</Link>
#메인 홈을 의미 -> {'/'}
<Link className="navbarMenu" to={'/Group'}>그룹</Link>
<Link className="navbarMenu" to={'/Note'}>노트</Link>
<Link className="navbarMenu" to={'/Settings'}>환경설정</Link>
<Link className="navbarLogin" to={'/Login'}>로그인</Link>
<Link className="navbarLogin" to={'/Join'}>회원가입</Link>
</div>
</div>
);
}
export default NavBar;
import React from 'react';
import './App.css';
import { BrowserRouter,Route, Routes } from 'react-router-dom';
import Introduction from './pages/Introduction';
import Home from './pages/Home';
import Group from './pages/Group';
import Note from './pages/Note';
import Settings from './pages/Settings';
import Login from './pages/Login';
import Join from './pages/Join';
import NavBar from './components/NavBar';
function App() {
return (
<BrowserRouter>
<div className="App">
<NavBar/>
<Routes>
<Route path="/Introduction" element={<Introduction/>}/>
<Route path="/" element={<Home/>}/>
<Route path="/Group" element={<Group/>}/>
<Route path="/Note" element={<Note/>}/>
<Route path="/Settings" element={<Settings/>}/>
<Route path="/Login" element={<Login/>}/>
<Route path="/Join" element={<Join/>}/>
</Routes>
</div>
</BrowserRouter>
);
}
export default App;
.h2{
text-align: left;
}
.navbar{
width: 1920px;
height: 84px;
flex-shrink: 0;
background-color: white;
}
.navbarMenu{
color: #9EA4AA;
margin: 8px;
text-decoration: none;
text-align: center;
}
.navbarLogin{
color: #9EA4AA;
margin: 8px;
text-decoration: none;
text-align: right;
}
text-decoration: none;을 사용하는 이유
: link를 이용해 페이지를 연결하면 밑줄이 자동적으로 생긴다. 따라서 해당 코드를 통해 밑줄을 제거한다.