[React] 리액트 라우터(Router) 설치 및 사용 방법

React

Router

 ▶ 사용자의 요청을 각 담당 컴포넌트로 연결하는 기능

→ 각 주소에 대한 화면을 보여주는 것

ex) /example/a à Hello

/board/1 à 1번 게시물 내용

/user à 회원 목록

 

▶ 자주 사용되는 컴포넌트

1. <BrowserRouter> : 애플리케이션 전체를 감싸며 라우팅을 관리

2. <Routes> : 여러개의 를 표현하기 위한 컴포넌트. 모습이 변화되는 영역

3. <Route> : 특정 경로에 해당하는 컴포넌트, 주소에 따라 보여지는 컴포넌트.

4. <a> 태그와 <Link> 컴포넌트

 => <a> 태그에서는 href 를 통하여 이동하고 <Link> 는 to 를 이용하여 이동을 한다. (속도측면에서 Link 가 낫다.)

<a>	<Link>, <NavLink>
<a href= " " />	<Link to =" " />
페이지 이동 & 전체 새로고침(데이터 새로 받아옴)	페이지 이동 & 일부만 새로고침 (필요한 부분만 재 렌더링, 데이터 받지 않음)

 

 

▶  라이브러리 설치

 

npm install react-router-dom

 

▶  Import

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

 

▶  Path Parameter(URL에 값을 포함시켜서 전달) , Request Parameter( ? 기호를 사용하여 Query String으로 전달)

import { BrowserRouter, Route, Routes, Link } from 'react-router-dom';
import { useParams, useLocation } from 'react-router-dom';

// SPA (Single Page Application) 

function Component1() {
    return <div>
        1번 화면</div>
}
function Component2() {
    return <div>
        2번 화면</div>
}
function Component3() {
    return <div>
        3번 화면</div>
}

function ComponentN() {
    const { number } = useParams();
    return <div> {number}번 화면</div>
}
function ComponentAZ() {
    const location = useLocation();
    const searchParams = new URLSearchParams(location.search);
    const id = searchParams.get('id');
    const name = searchParams.get('name');
    return <div>ID-{id}, NAME-{name}</div>
}


function Test() {
    return (
        <BrowserRouter>
            <div>
                <h1>Test</h1>
                <Link to='/1'>1번으로 이동</Link> /&nbsp;
                <Link to='/2'>2번으로 이동</Link> /&nbsp;
                <Link to='/3'>3번으로 이동</Link> /&nbsp;
                <Link to='/4'>4번으로 이동</Link> /&nbsp;
                <Link to='/5'>5번으로 이동</Link>
                <Link to='/a?id=10&name=abc'>이동 (Query String)</Link>
                
                // Router 적용 - 화면별 URL //
                <Routes>
                    <Route path='/1' element={<Component1 />} />
                    <Route path='/2' element={<Component2 />} />
                    <Route path='/3' element={<Component3 />} />
                    <Route path='/:number' element={<ComponentN />} />
                    <Route path='/a' element={<ComponentAZ />} />
                </Routes>

            </div>
        </BrowserRouter>
    );
}

export default Test;