[React JS] ' * '사용해 여러 라우팅 매칭하기

 

라우팅?

: 사용자가 요청한 URL에 따라 해당 URL에 맞는 페이지를 보여주는 것

: 많은 라우팅 관련 라이브러리 중 리액트 라우터를 가장 많이 사용

 

 

리액트 라우터

: 사용자가 입력한 주소를 감지하는 역할

: BrowerRouter, HashRouter 등이 존재

 

• BrowerRouter: HTML5를 지원하는 브라우저의 주소를 감지
• HashRouter: 해시 주소를 감지

 

 

Route와  Link 이해하기

<Route>

: 요청 주소에 따라 다른 컴포넌트를 보여주는 것

<Route path="주소" element={컴포넌트} />

 

 

<Link>

: 다른 주소로 이동시키는 형태

: 리액트에서는 <a>태그를 사용할 수 없으며, Link 컴포넌트를 사용해 주소만 바꾸고 페이지를 새로 불러오지 않는다.(SPA 방식때문)

<Link to="주소">content</Link>

 

 

' * ' 사용해 여러 라우팅 매칭( 주소 깊어졌을 때 활용 )

프로젝트를 진행하던 중 경로 설정에 있어 오류가 발생하였다.

메인 메뉴 페이지 -> 토이 프로젝트 페이지 -> 스포츠 챌린지 프로젝트 메인 -> 스포츠 챌린지 프로젝트 히스토리 페이지 컴포넌트들의 경로를 설정하는 과정에서 주소의 길이가 너무 길어지는 문제와 함께 콘솔 창에서는 주소가 깊어지므로 ' * '를 사용할 것을 권장하는 경고를 출력하였다.

 

리액트 라우터를 사용해 주소를 설정해 줄 때 *를 사용해 더 쉽게 경로를 설정할 수 있는 방법을 알아보고자 한다.

 

시작에 앞서, 해당 예시는 메인 페이지의 메뉴에서 토이 프로젝트 컴포넌트에 들어간다. 그 후 토이 프로젝트 페이지에서 스포츠 챌린지 메뉴를 선택한다. 스포츠 챌린지 페이지에 들어오면 해당 프로젝트의 메인 페이지와 히스토리 페이지로 이동하려 한다.

 

- 스포츠 챌린지 프로젝트의 메인 페이지 예상 경로: /toy-project/sports-challenge

- 스포츠 챌린지 프로젝트의 히스토리 페이지 예상 경로: /toy-project/sports-challenge/history

 

 

 

1. App.js에서 스포츠 챌린지의 App.js 역할을 하는 Sports.js 컴포넌트 불러오기

import Sports from "Sports 주소";

 

 

2. App.js에서 <Route>로 Sports 컴포넌트의 원하는 경로 정해주기

<Route path="/toy-project/sports-challenge/*" element={<Sports />} />

 

 

3. Sports 컴포넌트에서 스포츠 챌린지의 메인 컴포넌트와 히스토리 컴포넌트 불러오기

import SportsMenuBar from "./SportsMenuBar";
import SportsMain from "./SportsMain";
import SportsHistory from "./SportsHistory";

이때 SportsMenuBar는 메인,히스토리 컴포넌트의 경로 이동을 도와주는 역할

<Outlet />을 사용해 메인,히스토리 컴포넌트에서 같은 위치에 계속 나타날 수 있도록 고정시키기

 

 

4. Sports.js에서 <Route>로 메인, 히스토리 컴포넌트 원하는 경로 지정하기

<Routes>
        <Route path="/" element={<SportsMenuBar />}>
          <Route index element={<SportsMain />} />
          <Route path="/history" element={<SportsHistory />} />
        </Route>
</Routes>

앞서 App.js에서 Sports의 경로를 "/toy-project/sports-challenge/*"로 지정하였었다.

*를 사용하였기 때문에 뒤의 원하는 경로만 지정해주면 /toy-project/sports-challenge경로에 새로운 경로가 추가되는 형태이다.

 

즉, SportsMain 컴포넌트는 /toy-project/sports-challenge

SportsHistory 컴포넌트는 /history 경로만 추가되어 /toy-project/sports-challenge/history로 경로를 지정할 수 있다.

 

 

 

5. 스포츠챌린지의 메뉴 컴포넌트에서 이용해 원하는 경로로 이동시켜주는 역할 추가(SportsMenuBar.js)

<StyledLi>
  <StyledLink to="/toy-project/sports-challenge">홈</StyledLink>
</StyledLi>
<StyledLi>
  <StyledLink to="/toy-project/sports-challenge/history">히스토리</StyledLink>
</StyledLi>