[TIL/React] 2023/05/11

Router 까먹었다!

https://velog.io/@velopert/react-router-v6-tutorial#41-url-파라미터
벨로퍼트님의 글을 통해 복습했습니다!

React Router

A) 리액트 라우터 적용 및 기본 사용법

1. 프로젝트 생성 및 라이브러리 설치

프로젝트 생성

라이브러리 설치

2. 프로젝트에 라우터 적용

src/index.js

3. 페이지 컴포넌트 만들기

src/pages/Home.js

src/pages/About.js

4. Route 컴포넌트로 특정 경로에 원하는 컴포넌트 보여주기

Route 컴포넌트 기본 사용법

<Route path="주소규칙" element={보여 줄 컴포넌트 JSX}/>

src/App.js

5. Link 컴포넌트를 사용하여 다른 페이지로 이동하는 링크 보여주기

Link 컴포넌트 기본 사용법

<Link to="경로">링크 이름</Link>

src/pages/Home.js

회고

내일은 'URL 파라미터와 쿼리스트링'에 대한 학습을 시작으로 styled-component까지 학습하겠다. 투두리스트 프로젝트에 적용해 보는 것까지가 목표이다.