React Router를 활용한 라우팅 및 쿼리 처리

| react-router-dom

리액트의 라우팅을 위한 핵심 라이브러리.

(아래는 라우팅 설정, 파라미터와 쿼리 활용, 서브라우트 구성, 그리고 history 객체를 다루는 방법)

 

 

| 설치 및 기본 사용법

1. react-router-dom 설치

yarn add react-router-dom@5

 

- 특정 주소와 컴포넌트를 연결할 땐 Route 컴포넌트를 사용

<Route path="주소" component={보여줄_컴포넌트} />

 

- 주소이동은 Link 컴포넌트로 처리

import { Route, Link } from 'react-router-dom';

<Link to="주소">문자</Link>

 

 

 

 

| 파라미터와 쿼리

페이지 주소 정의 시 유동적인 값을 전달해야 할 때는 파라미터나 쿼리를 사용함.

• 파라미터: 특정 ID나 이름 조회 시 사용함.
  예: /profile/apple
• 쿼리: 검색 키워드나 옵션 전달 시 사용함.
  예: /profile?name=apple

- 파라미터는 라우트 경로에서 :파라미터명으로 설정 가능함.

<Route path="/profile/:username" component={Profile} />

 

- 쿼리는 문자열로 처리할 수도 있지만, 객체로 변환하려면 qs 라이브러리를 사용하면 편함.

yarn add qs

 

 

 

 

| 서브라우트

서브라우트는 라우트 내부에 또 다른 라우트를 만드는 것을 의미

<Route path="/main" component={Main}>
  <Route path="/main/sub" component={SubComponent} />
</Route>

 

 

 

 

| history 객체

history 객체는 컴포넌트 내에서 라우터에 직접 접근 가능하게 해줌.

• 뒤로가기
• 특정 경로 이동
• 페이지 이탈 방지

특정 조건에서 경로를 이동하려면 아래처럼 사용

 

import { useHistory } from 'react-router-dom';

const MyComponent = () => {
  const history = useHistory();

  const handleNavigate = () => {
    history.push('/new-route');
  };

  return <button onClick={handleNavigate}>Go</button>;
};

 

 

라우터를 사용하여 나타낸 내용