FRONTEND/React

[React] 라우터를 이용한 카피 프로젝트

죠으닝 2023. 11. 24. 15:25

라우터란?

https://blog.naver.com/c-maker/223242027735

 

[React] 라우터 (Router)

라우팅 (Routing) : 사용자가 요청한 url에 따라 그에 적합한 페이지를 보여주는 작업 ex) 사용자 '...

blog.naver.com

 

 

라우팅(Routing)이란?

사용자가 요청한 URL에 따라 그에 적합한 페이지를 보여주는 작업임

 

 


 

이전에 만든 movieapp으로 만든다.

 

movieapp2 폴더를 만든 후 movieapp에서 아래의 파일들만 복사해서 넣는다

 

 

 

 

모듈을 설치한다. 

 

 

터미널에서 라우터 설치한다.

 

 

 

그리고 index.jsx (vite 사용 시 index.jsx가 main.jsx로 사용)

의 App을 감싸는 태그를 BrowserRouter로 감싼다. 

 

 

Routes와 Route를 사용해서 결로를 렌더링한다. 

 

Routes는 여러 경로( Route) 를 감싸서 하위 경로 중 조건에 맞는 경로 하나만 렌더링 해주는 역할

Route : 경로