24.07.05 react-router-dom으로 페이지 이동 구현하기 / 모든 페이지에 Header, Footer 적용하기

1. react-router-dom 라이브러리 설치

//vscode 터미널에 입력
yarn add react-router-dom

 

2. 페이지 컴포넌트 생성

페이지 폴더로 구분지어서 생성해주는 것이 알아보기 좋다.

 

3. Router생성

//Router.js
import React from 'react';
// 1. react-router-dom을 사용하기 위해서 아래 API들을 import 합니다.
import { BrowserRouter, Route, Routes } from 'react-router-dom';

// 2. Router 라는 함수를 만들고 아래와 같이 작성합니다.
//BrowserRouter를 Router로 감싸는 이유는,
//SPA의 장점인 브라우저가 깜빡이지 않고 다른 페이지로 이동할 수 있게 만들어줍니다!
const Router = () => {
    return (
        <BrowserRouter>
            <Routes></Routes>
        </BrowserRouter>
    );
};

export default Router;

 

4. Router에 페이지 컴포넌트 연결

import React from 'react';
// 1. react-router-dom을 사용하기 위해서 아래 API들을 import 합니다.
import { BrowserRouter, Route, Routes } from 'react-router-dom';
import Home from '../pages/Home';
import Works from '../pages/Works';
import Contact from '../pages/Contact';
import About from '../pages/About';

// 2. Router 라는 함수를 만들고 아래와 같이 작성합니다.
//BrowserRouter를 Router로 감싸는 이유는,
//SPA의 장점인 브라우저가 깜빡이지 않고 다른 페이지로 이동할 수 있게 만들어줍니다!
const Router = () => {
    return (
        <BrowserRouter>
            <Routes>
                <Route path="/" element={<Home />} />
                <Route path="works" element={<Works />} />
                <Route path="contact" element={<Contact />} />
                <Route path="about" element={<About />} />
            </Routes>
        </BrowserRouter>
    );
};

export default Router;

 

5. App.js 에 Router.js import

import logo from './logo.svg';
import './App.css';
import Router from './shared/Router';

function App() {
    return <Router />;
}

export default App;

 

결과물

---

useLocation을 이용하여 해당 페이지의 정보를 알 수 있고, Link를 이용해서 이동할 수 있다.

import React from 'react';
import { useNavigate, Link, useLocation } from 'react-router-dom';

const Home = () => {
    const navigate = useNavigate();
    const location = useLocation();
    return (
        <div>
            <button
                onClick={() => {
                    navigate('/works');
                }}
            >
                Works이동
            </button>
            <div>{`현재 페이지 : ${location.pathname.slice(1)}`}</div>
            <Link to="/works">Works 페이지로 이동하기</Link>
        </div>
    );
};

export default Home;

home 페이지에서는 pathname이 / 이므로 현재페이지가 빈칸으로 표시된다.

 

a태그가 아닌 Link태그로 이동하는 이유는 a태그로 이동하면 화면이 새로고침되기 때문이다. 새로고침이 된다면 SPA의 장점이 없어지므로 라이브러리가 지원하는 Link태그를 사용하도록 하자.

 

---

먼저 모든 페이지의 부모컴포넌트가 될 Layout.js를 만들어준다.

// src/shared/Layout.js

import React from 'react';

//스타일 객체 생략

function Header() {
    return (
        <div style={{ ...HeaderStyles }}>
            <span>Header - Header 텍스트를 입력해보세요</span>
        </div>
    );
}

function Footer() {
    return (
        <div style={{ ...FooterStyles }}>
            <span>Footer - Footer 텍스트를 입력하세요</span>
        </div>
    );
}

function Layout({ children }) {
    return (
        <div>
            <Header />
            <div style={{ ...layoutStyles }}>{children}</div>
            <Footer />
        </div>
    );
}

export default Layout;

Layout 컴포넌트에 헤더와 푸터 컴포넌트를 만들고, 가운데 div태그를 넣어 children을 사용해준다.

 

import React from 'react';
import { BrowserRouter, Route, Routes } from 'react-router-dom';
import Home from '../pages/Home';
import About from '../pages/About';
import Contact from '../pages/Contact';
import Works from '../pages/Works';
import Layout from './Layout';

const Router = () => {
    return (
        <BrowserRouter>
            <Layout>
                <Routes>
                    <Route path="/" element={<Home />} />
                    <Route path="about" element={<About />} />
                    <Route path="contact" element={<Contact />} />
                    <Route path="works" element={<Works />} />
                </Routes>
            </Layout>
        </BrowserRouter>
    );
};

export default Router;

Router 파일에 Layout으로 Routes를 모두 감싸 모든 페이지에서 헤더와 푸터가 보이도록 바꿔준다.

완성본

모든 페이지에서 같은 Header와 Footer를 볼 수 있다.