리액트에서 페이지를 나누고 싶을 때, 일반 html, css, js 사이트는 그냥 html 파일을 여러 개 만들면 된다.
하지만 리액트는 html 파일을 하나만 사용한다.
따라서 사용자가 페이지 요청하면 내부에 있는 <div> 를 갈아치워서 보여주어야한다.
하지만 직접 코드 짜는 것은 비효율적이므로 react-router-dom 이라는 외부 라이브러리를 설치해서 구현하는 것이 일반적이다.
react-router-dom 설치
터미널에 npm install react-router-dom@6 입력하여 설치
import { BrowserRouter } from "react-router-dom";
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<React.StrictMode>
<BrowserRouter>
<App />
</BrowserRouter>
</React.StrictMode>
);세팅은 index.js 에서 import 한 후, <BrowserRouter> 로 <App/> 감싸주면 된다.
라우터로 페이지 나누기
웹사이트들을 보면
kosssshhhh.com/~~ 접속하면 1번 페이지를 보여주고
kosssshhhh.com/~~ 접속하면 2번 페이지를 보여준다.
url 경로마다 다른 페이지를 보여주고싶을 때 아래와같이 작성
(App.js)
import { Routes, Route, Link } from 'react-router-dom'
function App(){
return (
(생략)
<Routes>
<Route path="/detail" element={ <div>페이지1</div> } />
<Route path="/about" element={ <div>페이지2</div> } />
</Routes>
)
}1. 상단에 사용할 컴포넌트 import 후
2. <Routes> 만들고 그 안에 <Route /> 작성
3. <Route path="url경로" element={<html>} 작성해준다.
유저들은 url 을 입력해서 들어가는 것보다 링크 눌러서 들어가는 경우가 많다.
링크 만들고 싶으면 react-router-dom 에서 Link 컴포넌트 import 한 후, 원하는 곳에서 <Link>. 사용하면 된다.
<Link to="/">Home</Link>
<Link to="/detail">detail</Link>'React' 카테고리의 다른 글
| Lifecycle 과 useEffect (0) | 2023.02.26 |
|---|---|
| React Router (navigate, nested routes, outlet), useParams (0) | 2023.02.25 |
| export / import (0) | 2023.02.17 |
| React 이미지 파일 사용하기 (0) | 2023.02.17 |
| Class 이용하여 컴포넌트 생성하기 (0) | 2023.02.17 |