[ React.09.Router - react-router-dom ]

React Router 적용하기

적용에 있어 정답은 없다. 난 이렇게 했다는 것이다.

• node : v18.12.1
• react : v18.1.0
• react-router-dom : v6.3.0

react-router-dom 설치

npm 또는 yarn으로 react-router-dom 모듈을 설치한다.

npm i react-router-dom

설치하고 참조하여 사용하면 되는데 기본적인 개념에 대해 설명하겠다.

import { BrowserRouter, Route, Routes, Link, Switch, Navigate } from "react-router-dom";

• BrowserRouter : history API를 사용해 URL과 UI를 동기화하는 라우터
• Route : 컴포넌트의 속성에 설정된 URL과 현재 경로가 일치하면 해당하는 컴포넌트, 함수를 렌더링한다.
• Routes : Route 집합
• Link : to속성에 설정된 링크로 이동시키며 기록이 history스택에 저장된다.
• Switch : 자식 컴포넌트 Route또는 Redirect 중 매치되는 첫 번째 요소를 렌더링한다. Switch를 사용하면 BrowserRouter만 사용할 때와 다르게 하나의 매칭되는 요소만 렌더링한다는 점을 보장해준다. 사용하지 않을 경우 매칭되는 모두를 렌더링한다.
• Navigate : 컴포넌트가 렌더링될 때 현재 위치를 변경한다. 말그대로 안내자 역할이랄까

react-router-dom 예제

1. 여러 Route를 포함한 Routers를 반환해주는 Router 생성

• Router.jsx

import React, { Suspense } from 'react';
import { Route, Routes, Navigate } from 'react-router-dom';

import LoginPage from '../pages/login/LoginPage';
import MainPage from '../pages/main/MainPage';
import MyPage from '../pages/my/MyPage';
import CommonError from '../pages/common/CommonError';

const Router = (paramProps: any) => {
	return (
		<Suspense>
			<Routes>
				{ /* Redirect from root URL to /login.  */ }
				<Route path='/' element={<Navigate replace to='/login' {...paramProps} />} />
				{/* login 관련 router */}
				<Route path={'/login'} element={<LoginPage {...paramProps} />} />
				{/* main 관련 router */}
				<Route path={'/main'} element={<MainPage {...paramProps} properties={paramProps.properties} />} />
				{/* 기타 짜바리 친구들 */}
				<Route path={'/my'} element={<MyPage {...paramProps} />} />
				<Route path={'/error'} element={<CommonError {...paramProps} />} />
				<Route path='*' element={<CommonError {...paramProps} />} />
			</Routes>
		</Suspense>
	);
};

export default Router;

2. BrowserRouter 컴포넌트를 최상위 태그에 감싸준다.

👽 App에서 단 하나의 라우터만 사용한다는게 기본 정책이다.

• App.jsx

import { Suspense } from 'react';
import { BrowserRouter } from 'react-router-dom';
import Layout from './pages/layout/Layout';

const App = (props: any) => (
	<Suspense>
		<BrowserRouter basename={props.basename}>
			<Layout {...props} />
		</BrowserRouter>
	</Suspense>
);

export default App;

3. 실제 라우팅이 이루어질 레이아웃에 생성한 Router 할당

• Layout.jsx

import Router from '../../router/Router';
import { useNavigate } from 'react-router-dom';

import Header from './header/Header';
import Footer from './footer/Footer';

const Layout = (props: any) => {
	const navigate = useNavigate();

	return (
		<>
			<Header />
			<Router navigate={navigate} {...props} />
			<Footer />
		</>
	);
};

export default Layout;

4. Header에 Router Link 추가

• Header.jsx

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

export const Header = () => {
	return (
		<div>
			<Link to="/login">로그인</Link><br/>
			<Link to="/main">메인</Link><br/> 
			<Link to="/my">마이</Link><br/>
		</div>
	);
};

export default Header;

실행 후 각 Link 클릭해보면 정상 작동 확인