react 페이지 이동 구현 실습

1. react-router-dom을 설치한다.
2. import { BrowserRouter,Route, Routes } from 'react-router-dom'; ← 헤더 추가하기
3. import { Link } from "react-router-dom"; 연결하고자 하는 페이지에 헤더 추가

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;

1. App.js에서 router tag를 이용해 코드 작성

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;

• css 추가 코드

.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를 이용해 페이지를 연결하면 밑줄이 자동적으로 생긴다. 따라서 해당 코드를 통해 밑줄을 제거한다.