[Video] 리액트 라우터 (react-router v4) 강의 [1/3] : 사용 방법


작년 Pre-release alpha시절에 한번 자료를 만든적이 있지만 올해초에 정식 릴리즈되면서 바뀌어도 너무 많이바뀌어버려서 이렇게 자료를 새로 만들었습니다. 흔히 사용되는 기능들을 대부분 다뤄보려다보니 생각보다 강의가 길어져서 동영상 하단에 타임라인을 추가했으니 참고하세요~

타임라인

00:00 – 05:25 소개 및 프로젝트 셋업
05:25 – 10:32 리액트 라우터 기본 설정
10:32 – 16:09 링크 컴포넌트 사용법
16:09 – 17:30 URL 파라미터 설정
17:30 – 21:20 서브 라우트 설정
21:20 – 23:15 NavLink 를 사용한 액티브 라우트 스타일 설정
23:15 – 26:50 Redirect 컴포넌트로 리디렉팅하기
26:50 – 28:10 history.push 를 사용하여 메소드에서 리디렉팅하기
26:50 – 31:46 쿼리 파라미터 불러오기
31:46 – 35:33 Switch 를 사용한 404 페이지

코드

https://github.com/vlpt-playground/rr4-tutorial

 

 

이어질 강좌는 코드스플리팅과 서버사이드 렌더링입니다~

  • YoungJoo Han

    항상 잘 보고있습니다.

    감사합니다.

  • 강의잘보았습니다. 남은 강의도 기대해봅니다. 감사합니다.

  • 박성진

    강의 잘보고있습니다. 여기서 질문이 하나있는데요.
    create-react-app 말고 자체적으로 구성해서 만들고있는데 페이지를 새로고침하면 서버에 올라가있는 파일에 /about 이라는 파일이 없어서 페이지가 안나오는데요. 찾아보니 refresh 에 관련된것도 있고 browserHistory에 관련된 것도 있던데…
    정확히 어떻게 잡아야하는건가요. 지금 Node 서버사이드랑 연결해서 작성하는 중 입니다.

    • 답이 늦어서 죄송합니다 🙁 아마 지금쯤 해결하셨을것같지만…
      https://velopert.com/2937

      를 참조해주세요. 그 부분에 대해서 다뤘습니다.

  • 똥광이

    강의 잘 봤습니다~ 감사합니다!

  • noob

    항상 감사합니다 Router v4.x를 사용중인데 3.x에서는 this.props.location.pathname으로 현재 path에 접근이 가능하던데 v4에서는 안되는거같더라구요 웹어플리케이션(2)를 보면서 진행하고 있는데 혹시 v4에서는 location.pathname 에 접근하는 방식이 다른가요?

    • noob

      아 new URLSearchParams(location.pathname) 접근하니 됬네요 ㅋㅋ 감사합니다

  • Coding Mentor

    Nice Article!