[React] Router 사용하기 (페이지 이동)

리액트에서 페이지를 이동하기 위해 Router를 사용한다.

리액트는 SPA(단일 페이지)이기 때문에 라우팅 라이브러리를 사용하게 되면 라우터를 통해 화면에 보이는 컴포넌트들을 변경해준다.

결론적으로 컴포넌트만 변경해주는 것이며 사용자가 보기에는 페이지가 이동된것처럼 보인다.

[ 설치 ]

- npm

npm install react-router-dom

- yarn

 

yarn add react-router-dom

 

 

[ 사용예시 ]

App.js 파일에 Header, Contents, Board, Footer 컴포넌트가 있다고 가정하며,

content.js에서 이미지 클릭 시, Contents 컴포넌트에서 Board 컴포넌트로 변경되는 과정이다.

 

 

<BrowserRouter> : 해당 태그로 컴포넌트를 감싼다.

<Routes> : 컴포넌트를 여러 Route로 감싸고 규칙이 일치라는 라우트를 렌더링 시켜준다.

<Route> : path속성에는 경로 element에는 컴포넌트를 넣는다. 

import React, { Component } from 'react';
import { BrowserRouter, Routes, Route } from 'react-router-dom';
import Header from './components/main/header.js'
import Contents from './components/main/content.js'
import Board from './components/main/board.js'
import Footer from './components/main/footer.js'

function App() {

    return (
        <div>
            <BrowserRouter>
                <Header/>
                    <Routes>
                        <Route path="/" element={<Contents/>}></Route>
                        <Route path="/board" element={<Board/>}></Route>
                    </Routes>
                <Footer/>
            </BrowserRouter>
        </div>

    );
}


export default App;

 

 

import React, { useRef, useState } from 'react';
import { Swiper, SwiperSlide } from 'swiper/react';
import { Autoplay, Pagination, Navigation } from 'swiper/modules';
import { Link } from 'react-router-dom';

import './content.css';
import 'swiper/css';
import 'swiper/css/navigation';

function content() {

    return (
    <div className="mainContainer">
    <div className="widget">
        <Link to="/contract"><img src="/images/icon.png" /></Link>
    </div>
        <div id="content">
            <Swiper navigation={true} modules={[Autoplay, Pagination, Navigation]} className="mySwiper"
                    autoplay={{delay: 4000}} loop={true} navigation={true}>
                <SwiperSlide><img src="/images/work1.jpg" /></SwiperSlide>
                <SwiperSlide><img src="/images/work2.jpg" /></SwiperSlide>
            </Swiper>
        </div>
    </div>
    );
}
export default content;

Link 컴포넌트를 사용하기 위해서는 import를 해줘야한다.

import { Link } from 'react-router-dom';