카테고리 없음

21.09.03 마이 포트폴리오 jemerald 제작 시작!

슈팅스타제제 2021. 9. 4. 14:43

✔npm을 통해 리액트 프로젝트를 생성하고

홈 화면에 다른 컴포넌트로 바꿀 수 있는 링크를 추가하기 위해 모듈을 설치한다.

react-router-native은 앱 개발 전용, react-router-dom은 웹 개발 전용, react-router은 두 가지가 모두 포함되어있다.

>> npx create-react-app <프로젝트명>
>> npm install react-router-dom

 

✔프로젝트를 실행하기 위해서는 콘솔창에 아래와 같이 입력한다. 

>> npm run start

 

하지만 다음과 같이 에러가 발생하였다. 

✔Error: Invariant failed: You should not use <Link> outside a <Router>

→ Link를 불러올 때 BrowserRouter를 불러온 다음에 추가해야 한다!

 

1. BrowserRouter 내부에는 Link를 담는다. 

BrowserRouter는 HTML5의 history API를 활용하여 UI를 업데이트하는데 동적 페이지에 보편적으로 쓰인다. 

2. Switch 내부에는 Route를 담는다.

Switch는 path간의 충돌이 나지 않게 Route를 관리해주는 역할을 한다. 

 

참고 링크 : https://stackoverflow.com/questions/55552147/invariant-failed-you-should-not-use-route-outside-a-router