땅꼬마의 React-Router 적용하기!

HTML의 경우 <a href="URL"> 요렇게 a태그를 활용하여 페이지 전환을 한다.

그리고 전환될때마다 페이지가 리로드되어 깜빡거림이 있다.

 

React는 SPA(Single Page Application) 프레임워크이다!

페이지 전체의 요소를 하나의 페이지에 담고 있기 때문에 리로드할 필요 없이 필요한 데이터만 가져와 보여주게끔 해준다.

 

그 필요한 요소가 어떤것인지 주소를 감지하는 역할을 하는 것이 react-router다.

 

1. react-router-dom 설치

npm install react-router-dom

 

2. 적용하기

index.html

BrowserRouter : <Link to=""> 태그를 통해 페이지에 리로드 없이 이동한다.

import React from 'react';
import ReactDOM from 'react-dom/client';
import {BrowserRouter} from 'react-router-dom'
import './index.css';
import App from './App';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <BrowserRouter basename='/my-blog'>
    <App />
  </BrowserRouter>
);

 

App.js

header와 navi 컴포넌트를 import 했다.

import './App.css';
import React from 'react';
import Navi from './components/Navi'
import Header from './components/Header'

function App() { //메인페지이
  return (
    <> 
      <Header/>
      <Navi />
    </>
  );
}

export default App;

 

Header.js

<Link> 태그로 로고 클릭시 home으로 이동

import React from "react";
import { Link } from "react-router-dom";
import styled from 'styled-components'

const LOGO = styled.h1`
  display: inline-block;
  margin-left: 10px;
`;
const HeaderWrap = styled.div`
  background-color : #eeeeee;
`;
const Container = styled.div`
  width: 100%;
  margin: 0 auto;
`;


const Header = () => {
    return(
        <HeaderWrap>
            <Container>
                    <Link to='/#'><LOGO>KEVIN BLOG</LOGO></Link>
            </Container>
        </HeaderWrap>
    )
}

export default Header;

Navi.js

<NavLink> 태그는 active클래스가 활성화 되어서 효과를 넣을 때 활용 할 수 있다.

<Routes> 하위에 <Route>로 path와 element를 정의하여 해당 Link를 통해 해당 path가 들어오면 그 path에 해당하는 요소를 불러온다.

import React from "react";
import styled from "styled-components";
import { Routes, Route, NavLink } from "react-router-dom";
import About from "../components/About";
import Portfolio from "../components/Portfolio";
import Contact from "../components/Contact";
import Board from "../components/Board"
import BoardWrite from "./Board/BoardWrite";

const Nav = styled.div`
    width: 100%;
    height: 30px;
    border-bottom: 1px solid #d1d8e4;
`

const NavList = styled.ul`
    width: 100%;
    display: flex;
`

const NavItem = styled(NavLink)`
    margin-left: 20px;
    display: flex;
    :active, :hover  {
        background: red;
    };
`
const Navi = () => {
    return(
        <Nav>
            <NavList>
                <NavItem to='/about'>About</NavItem>    
                <NavItem to='/board'>Board</NavItem>    
                <NavItem to='/portfolio'>Portfolio</NavItem>    
                <NavItem to='/contact'>Contact</NavItem>    
            </NavList>
            <Routes>
                <Route path="/about" element={<About/>}></Route>
                <Route path="/board" element={<Board/>}></Route>
                <Route path="/portfolio" element={<Portfolio/>}></Route>
                <Route path="/Contact" element={<Contact/>}></Route>
                <Route path="/board/write" element={<BoardWrite/>}></Route>
            </Routes>
        </Nav>
    );
}

export default Navi;

 

<출력화면>

<home>

<About>

<Board>

 

요런식으로 이동이 가능하다!