react router
react router
router란
SPA(Single Page Application) 싱글페이지라고 부르는 이유는 유저가 처음 접속했을때 구체적인 data를 제외한 정적파일을 모두 불러오기 때문
리액트 라우터로 페이지를 나누어 유저가 접속하는 url마다 다른 data를 보여줄 수 할수 있음
페이지의 로딩 없이, 페이지에 필요한 컴포넌트를 불러와 렌더링 하여 보여주도록 도와줌
새로운 페이지를 로드하지 않고 하나의 페이지 안에서 필요한 데이터만 가져오는 형태
CSR(Client Side Rendering)
최초 한 번 HTML, static, js 등을 다 받아와서 로딩하는 방식
이후에는 클라이언트의 요청이 있을 때마다 리소스를 서버에서 제공하고 클라이언트가 해석 후 렌더링
클라이언트 요청=> 변화가 필요한 영역만 서버에 전달=> 서버에서 클라이언트로 리소스 전달=> 클라이언트에서 view 처리
SPA(Single Page App) 형식의 프론트엔드 라이브러리(React, Vue)의 방식
(React SSR 라이브러리=Next.js, Vue SSR 라이브러리=Nuxt.js)
처음에 HTML에 대한 정보 비어 있음
yarn add react-router-dom
과거의 버전을 쓰고 싶다고 하면
package.json 열기
"react-router-dom": "5",
수정후
터미널에서 yarn
yarn yarn
===============
현재 6 버전으로 바뀜
[Declarative routing for React apps at any scale | React Router
Version 6 of React Router is here! React Router v6 takes the best features from v3, v5, and its sister project, Reach Router, in our smallest and most powerful package yet. reactrouter.com](https://reactrouter.com/)
https://reactrouter.com/docs/en/v6/upgrading/v5
import { BrowserRouter , Routes, Route, Link } from "react-router-dom";
<Route path="주소" element={ <보여주고싶은 컴포넌트 /> }>
Switch => Routes로
Route : 어떤경로로 들어왔을때 어떤 컴포넌트를 보여주겠다.. ( 컴포넌트 보이는 영역)
<Routes>
<Route path="/aaa" element={<Aaa />} />
<Route path="/bbb" element={<Bbb />} />
</Routes>
Link : Router의 주소를 바꿈 a 태그지만 새로고침 안됨
<Link to="/">홈</Link>
<Link to="/path주소">소개</Link>
<Link to="/about">소개</Link>
useHistory 사라짐 - useNavigate 함수
history.push('/') -> navigate('/')