티스토리 뷰
리액트에서 페이지를 이동하기 위해 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';
댓글
링크
최근에 올라온 글
- Total
- Today
- Yesterday