24.08.16 react-router-Dom 설정

1. React-Router-Dom 설치

yarn add react-router-dom

 

2. 페이지 폴더 및 파일 추가

 

3. Router.jsx 생성

shared폴더에 Router.jsx파일을 생성한 후

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

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

export default Router;

연결해줄 페이지 컴포넌트를 import해서 위와 같은 형식으로 Route에 지정해준다.

 

4. App컴포넌트에 Router컴포넌트 연결

import React from "react";
import Router from "./shared/Router";

const App = () => {
    return <Router />;
};

export default App;

 

5. 페이지 이동기능 구현

import React from "react";
import { useNavigate } from "react-router-dom";

const Works = () => {
    const navigate = useNavigate();
    return (
        <div>
            <h1>Works 컴포넌트</h1>
            <button
                onClick={() => {
                    navigate("/");
                }}
            >
                Home으로 이동
            </button>
        </div>
    );
};

export default Works;

react-router-dom 라이브러리에서 제공하는 useNavigate훅을 사용하여 안에 주소값을 지정하면 해당 페이지로 이동이 가능해진다.

 

6. useLocation

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

const Works = () => {
    const navigate = useNavigate();

    const location = useLocation();

    console.log(location);
    return (
        <div>
            <h1>Works 컴포넌트</h1>
            <div>현재 페이지: {location.pathname.slice(1)}</div>
            <button
                onClick={() => {
                    navigate("/");
                }}
            >
                Home으로 이동
            </button>
            <Link to="/contact">contact페이지로 이동하기</Link>
        </div>
    );
};

export default Works;

useLocation은 해당 페이지의 주소관련 데이터를 가져와 준다.

그렇게 가져온 값을 변수에 저장하여 데이터로 화면에 보여줄수도, 코드내에서 사용할 수도 있다.

 

앞에서 useNavigate를 사용하여 페이지를 이동했었다. 하지만 react-router-dom에서 Link태그도 지원해준다.

Link태그는 바닐라js의 a태그처럼 요소를 만들어주지만, a태그처럼 새로고침을 유발하지는 않는다.

to 속성값에 원하는 주소를 입력하여 navigate와 동일한 기능을 구현할 수 있다.

 

모든 페이지에 헤더와 푸터 적용하기

모든 페이지에 동일한 스타일을 적용하려면 Layout으로 Router을 감싸주면 된다.

// src/shared/Layout.js

import React from 'react';

const HeaderStyles = {
  width: '100%',
  background: 'black',
  height: '50px',
  display: 'flex',
  alignItems: 'center',
  paddingLeft: '20px',
  color: 'white',
  fontWeight: '600',
};
const FooterStyles = {
  width: '100%',
  height: '50px',
  display: 'flex',
  background: 'black',
  color: 'white',
  alignItems: 'center',
  justifyContent: 'center',
  fontSize: '12px',
};

const layoutStyles = {
  display: 'flex',
	flexDirection: 'column',
  justifyContent: 'center',
  alignItems: 'center',
  minHeight: '90vh',
}

function Header() {
  return (
    <div style={{ ...HeaderStyles }}>
      <span>Sparta Coding Club - Let's learn React</span>
    </div>
  );
}

function Footer() {
  return (
    <div style={{ ...FooterStyles }}>
      <span>copyright @SCC</span>
    </div>
  );
}


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

export default Layout;

 

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;

이렇게하면 모든 컴포넌트에 헤더와 푸터가 적용된다.