[React.js] router

카테고리 : Development
태그: development · reactjs · SPA · CSR · Route · Routing · switch · Link · useNavigate
등록일: 2022년 09월 09일
최근 업데이트: 2023년 03월 29일

---

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 버전으로 바뀜

https://reactrouter.com/

**[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(‘/’)