Skip to content

리액트 라우트 경험하기 #6

@DeveloperRyou

Description

@DeveloperRyou

기본 명세 사이트 : https://reactrouter.com/en/main/router-components/browser-router

참고자료 :
https://goddaehee.tistory.com/305
https://velog.io/@wiostz98kr/TIL49-l-React-%EB%A6%AC%EC%95%A1%ED%8A%B8-%EB%9D%BC%EC%9A%B0%ED%84%B0React-Router-%EC%82%AC%EC%9A%A9%ED%95%98%EA%B8%B0-Feat.-SPA

세번째 과제입니다.
리액트 라우터를 경험해봅시다.

필수 구현

  1. 리액트 라우터 설치하기
  1. 프로젝트 폴더에서 npm install react-router-dom 또는 yarn add react-router-dom 으로 라우터를 설치해주세요.
  1. 브라우저 라우터를 이용해서 페이지를 분리해주세요.
  1. / : 인스타그램 로그인 클론 페이지를 라우팅해주세요
  2. /main : 표 형태의 게시글 목록 페이지를 작성해 주세요. 디자인은 자율입니다.
  • 작성한 유저의 닉네임, 게시글 제목, 댓글 수, 작성한 시간이 표에 포함되어 있어야 합니다.
  • 표는 각 열의 정보를 담는 행 1개, 실제 게시글 정보를 담고있는 행 2개로 구성해 주세요.
  • 실제 게시글 정보는 임의로 구성하시면 됩니다.

보너스 구현

  1. 로그인 버튼을 눌렀을 때 /main 링크로 넘어가도록 구현해주세요

a 태그를 사용하지 말고 Link 라는 컴포넌트를 찾아보세요

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions