(React) React Router로 SPA 생성

쉬운 목차

1. SPA(단일 페이지 신청)

SPA사용자가 여러 페이지가 있는 것처럼 느껴지지만 실제로는 단일 페이지임을 의미합니다.

다중 페이지 응용 프로그램을 기반으로 페이지가 이동할 때마다 새 리소스가 수신되어 표시됩니다.

SPA~이다 html1회만 수신되며, 페이지 이동 시 변경될 부분만 다시 수신됩니다.

'추천 관련글,

이와 같이 페이지를 구성하면 사용자 상호 작용이 많은 애플리케이션에서 속도를 향상시킬 수 있습니다.

더 원활한 페이지 업데이트가 가능하다는 장점이 있습니다.

비교를 위해 페이지를 처음 보면 거의 비어 있습니다.
html 페이지를 얻을

나머지 콘텐츠는 JavaScript로 구성되어 있어 초기 로딩 시간이 길 수 있다는 단점이 있습니다.

SPA또 다른 단점이 있다면 페이지가 이동해도 주소가 변경되지 않는다는 것입니다.

(당연히 SPA페이지가 1개뿐이므로 엄밀히 말하면 “페이지 이동”이 아닙니다.

브라우저에는 세션 레코드에 대한 액세스를 허용하는 메서드가 포함되어 있습니다.
window.history 물건을 제공하다

그것을 활용 history API다음을 사용하여 이 문제를 해결할 수 있습니다.

뒤를 치우다 react router이것은 구성 요소에 의해 구현됩니다.

라우터 응답 SPA구현하기 위한 라이브러리입니다.

가장 많이 사용되고 가장 오래된 React 라우팅 라이브러리 중 하나입니다.

라우팅 구현 Next.js 프레임워크를 사용할 수도 있으므로 주의하십시오!

페이지를 새로 고치지 않고 주소를 변경할 수 있도록 기록 API를 사용합니다.

BrowserRouter태그 상단에 다른 구성요소를 배치합니다.

Route경로와 구성 요소를 연결하는 역할을 합니다.

Route구성 요소는 Routes여러 경로 중 하나만 연결되도록 합니다.

<Routes>
<Route path="/" element={<Home />} />
<Route path="/mypage" element={<MyPage />} /> 
</Routes>

HTML a태그처럼 작동합니다.
연결할 요소나 텍스트를 묶습니다.

a~ 아니다 Link사용해야 하는 이유는 페이지가 다시 렌더링되기 때문입니다.

그것은 정확히 구성 요소가 아니라 캐치입니다.

Link특정 경로에 연결하는 것이 중요한 경우,

useNavigate특정 조건에서 정의된 경로로 이동할 수 있습니다.

참고자료 (보기위해 정리합니다)

History API – 주소를 맞춤 설정하세요!

React Router 공식 문서 – 역사

응답하는 라우터 – useNavigate