리액트 라우터 사용하기

App.tsx 파일에서

BrowserRouter, Routes, Route 세가지 모듈을 import해주고

App() 함수의 return에 있던 div를 지우고 라우터를 리턴해준다.

그리고 가장 기본이 되는 페이지는 index라고 표시해주고 경로를 입력해준다.

여기서 경로는 해당 URL. 그냥 "/"는 최초로 해당 URL 자체만 있는 것

베이스 URL이 이렇게 있으니까 슬래시 하나면 그냥 이 URL로 접속했을때를 의미함

 

React Router에서 사용하는 주요 컴포넌트들의 차이는 아래와 같다

컴포넌트	역할	특징
<BrowserRouter>	라우터 전체를 감싸며, 브라우저의 History API를 사용해 URL 관리	애플리케이션 전체를 감싸며, 반드시 필요.
<Routes>	<Route>들을 감싸며, 현재 URL과 일치하는 하나의 <Route>만 렌더링	<Switch>의 대체이며, v6부터 도입됨
<Route>	특정 경로(path)와 컴포넌트를 연결하여, URL에 따라 컴포넌트를 렌더링	path와 element 속성을 사용해 경로와 컴포넌트를 설정합니다.

<Route>는 라우팅이 필요 없다면 생략 가능하지만, 보통은 라우팅을 위해 사용하고, 

일반적으로 세 가지 모두 사용하는 것이 표준이고 효율적으로 라우팅하는 방법이다.

 

 

어떤 페이지에 컴포넌트를 띄워줄지 알려줬으니 

이제 컴포넌트를 띄워주는 부분은 element속성에 해당 페이지 컴포넌트를 넣어주면 된다.

 

src/pages/ 아래에 index.tsx파일을 만들어줌.

마찬가지로 rfce(ReactFunctionalExportCompenent)로 기본코드를 만들고

이런식으로 내용이 있다면, 

다시 App.tsx 파일에서 이 페이지 컴포넌트를 넣어준다. element 안에 컴포넌트 자체를 넣어줌

마찬가지로 about페이지도 만들어줌.

@page/index에서 .tsx를 생략할 수 있는 이유는 Alias 설정 덕분에 특정 디렉토리를 가리키고,

Webpack이나 Vite 같은 모듈 번들러는 기본적으로 파일 확장자를 생략해도 자동으로 인식하도록 설정되어 있기 때문이다.

기본적으로 찾는 확장자들:

보통 번들러 설정에서 아래 순서로 파일을 탐색

• .tsx
• .ts
• .js
• .jsx
• .json

 

홈페이지 화면

 

/about으로 접속했을 때

 

---

만약에 검색창을 활용하면 검색어에 따른 페이지를 보여주게됨.

이때, 전체적인 UI는 같고, 검색된 이미지 부분만 다르게 보이도록 하고싶은 경우

-> 페이지 UI가 대체로 동일하고, 특정 조건(파라미터)에 따라서 내용물만 바꾸고 싶은 경우에

라우터 뒤에 /:id 이렇게 id라는 특정 값을 넣어줌

이렇게 되면 같은 컴포넌트 페이지를 공유하지만 컨텐츠에 따라 라우팅 할 수 있음

about/7

about/asdf

어떤 걸 입력해도 about페이지가 그대로 떠있는 것을 확인할 수 있다.