# Router 실습

## 페이지 컴포넌트 불러오기&#x20;

{% embed url="<https://codesandbox.io/s/react-router-gongbuhagi-1-i8r47>" %}

## Link 컴포넌트 사용하기&#x20;

{% embed url="<https://codesandbox.io/s/react-router-link-silseub-n51gf>" %}

## NavLink 컴포넌트 사용하기&#x20;

{% embed url="<https://codesandbox.io/s/react-router-navlink-keomponeonteu-11k2i>" %}

## NavLink 활용 (1)

NavName 속성 사용해서 변수에 담아서 사용

이 방법으로 사용하게 되면 App에서 사용되는 컴포넌트에만 스타일이 적용된다. 이 방법보다는 활용(2)와 같이 style 파일을 만들어서 공통적으로 스타일을 적용하는 것이 좋다.&#x20;

{% embed url="<https://codesandbox.io/s/navname-sogseong-sayonghaeseo-byeonsue-damaseo-sayong-7vwzz>" %}

## NavLink 활용 (2)

Style 파일을  만들어서 NavLink 컴포넌트에 일괄적으로 스타일 적용&#x20;

{% embed url="<https://codesandbox.io/s/keoseuteom-navlink-mandeuleobogi-qplql>" %}

## Switch 컴포넌트 사용 전&#x20;

Switch 컴포넌트를 사용하지 않고 Route와 Redirect를 사용할 경우 올바른 url를 입력했지만 계속해서 Redirect에 설정한 to속성 값으로 이동한다.&#x20;

{% embed url="<https://codesandbox.io/s/redirect-sayongsi-oryu-ubxjv?file=/src/App.js:4490-4498>" %}

## Switch 컴포넌트 사용 후&#x20;

{% embed url="<https://codesandbox.io/s/page-not-found-oryu-haegyeol-7brds>" %}
