react의 라우팅

SPA 라우팅 과정

1. 브라우저에서 최초에 '/' (root) 경로로 요청을 하면,
2. React Web App 을 내려줍니다.
3. 내려받은 React App 에서 '/' 경로에 맞는 컴포넌트를 보여줍니다.
4. React App 에서 다른 페이지로 이동하는 동작을 수행하면,
5. 새로운 경로에 맞는 컴포넌트를 보여줍니다.

 

https://reactrouter.com/

Declarative routing for React apps at any scale | React Router

 

 

react router 라이브러리 설치하는 방법

npm i react-router-dom

• cra(create-react-app) 에 기본 내장된 패키지가 아닙니다.
• react-router-dom 은 Facebook 의 공식 패키지는 아닙니다.
• 가장 대표적인 라우팅 패키지입니다.

 

 

예시로 

 

이런 방식으로 about, home, profile 파일을 만들어 주었다.

 

 

 

이렇게 페이지에 표현이 되는데 Home 페이지입니다.를  ./ 경로에서만 나오게 하려면

 

<Route path="/" exact component={Home} />

 

이렇게 exact 를 중간에 작성해주면 된다. (v5에서 사용, v6에서는 사용하지 않는다 )

 

---

https://slides.com/woongjae/react2021#/21/7    패스트캠퍼스 수강 중 

공부 내용 정리 중

React 2021