react에서 라우팅하는 방법들(페이지 이동하는 방법)

라우팅이란?

라우팅은 네트워크에서 경로를 선택하는 프로세스로
쉽게 말해 사용자가 요청한 URL에 따라 해당 URL에 맞는 페이지를 보여주는 것

React Router (리액트 라우터) 사용

1. 태그로 컴포넌트 사용하기

2. , 컴포넌트 사용하기

3. 컴포넌트 사용하기

• a태그는 클릭시 페이지를 새로 불러오기때문에 사용하지 않는다.
• Link 컴포넌트는 생김새는 a태그를 사용하지만, History API를 통해 브라우저 주소의 경로만 바꾸는 기능이 내장되어 있다.
• 문법 : 링크명
• import { Link } from 'react-router-dom';

4. 사전에 정의하지 않은 경로로 접근하는 경우 NotFound 페이지로 이동 처리

상단에 위치하는 라우트들의 규칙을 모두 확인, 일치하는 라우트가 없는경우 처리

<Route path="*" element={<NotFound />}></Route>

5. URL 파라미터와 쿼리 스트링 사용하기

• 파라미터, 쿼리스트링을 통해 유동적으로 동작할 수 있다.

5.1) URL 파라미터

import { useParams } from 'react-router-dom';
const { 파라미터명 } = useParams(); // const 변수명 = useParams().파라미터명;

App.js

<Route path="/product/:productId" element={<Product />}></Route>

이러면 파라미터를 통해 상품 ID를 받아올 수 있다.

import React from 'react';
import { useParams } from 'react-router-dom';

const Product = () => {
    const { productId } = useParams();
    return (
        <>
            <h3>{productId}번 상품 페이지 입니다.</h3>
        </>
    );
}

export default Product;

5.2) 쿼리스트링
여기는 다음에 하나씩 공부해볼것들.

useLocation

• hash : 주소의 #문자열 뒤의 값
• pathname : 현재 주소 경로
• search : ?를 포함한 쿼리스트링
• state : 페이지로 이동시 임의로 넣을 수 있는 상태 값
• key : location 객체의 고유 값, 초기값은 default, 페이지가 변경될 때 마다 고유의 값이 생성된다.

useSearchParams

useNavigate

• Link 컴포넌트를 사용하지 않고 다른 페이지로 이동을 해야 하는 경우, 뒤로가기 등에 사용하는 Hook 이다.
• replace 옵션을 사용하면 페이지를 이동할 때 히스토리를 남기지 않는다.

• navigate(-2)}>Go 2 pages back
• navigate(-1)}>Go back
• navigate(1)}>Go forward
• navigate(2)}>Go 2 pages forward
• navigate('/')}>Go Root
• navigate('/', {replace: true})}>Go Root

	<ul>
          <li><button onClick={() => navigate(-2)}>Go 2 pages back</button></li>
          <li><button onClick={() => navigate(-1)}>Go back</button></li>
          <li><button onClick={() => navigate(1)}>Go forward</button></li>
          <li><button onClick={() => navigate(2)}>Go 2 pages forward</button></li>
          <li><button onClick={() => navigate('/')}>Go Root</button></li>
          <li><button onClick={() => navigate('/', {replace: true})}>Go Root</button></li>
   </ul>

참고 블로그 : https://goddaehee.tistory.com/305