React

[TIL/React] 2023/05/11

Router 까먹었다!https://velog.io/@velopert/react-router-v6-tutorial벨로퍼트님의 글을 통해 복습했습니다!React Router프로젝트 생성라이브러리 설치src/index.jssrc/pages/Home.jssrc/pa

2023년 5월 11일1min read

Router 까먹었다!

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

React Router

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

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

프로젝트 생성```


![](https://velog.velcdn.com/images/minkwan/post/1152dc38-06c3-40b6-8f3f-771a20891945/image.png)

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

src/index.js```


![](https://velog.velcdn.com/images/minkwan/post/b46faa47-b663-4021-964c-7632001abecb/image.png)


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

src/pages/About.js```


![](https://velog.velcdn.com/images/minkwan/post/afbbf2fc-51b3-4e62-936c-17691bb27e4a/image.png)

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

code

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

src/App.js```


![](https://velog.velcdn.com/images/minkwan/post/eab17bb4-b20b-4ecb-9e80-58c134efaf56/image.png)

![](https://velog.velcdn.com/images/minkwan/post/ee5401fa-b6cd-4048-a8ac-3155fe2075e6/image.png)

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

code

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