[React] 라우트 설정하기 (react-router-dom)

 

리액트는 SPA로 페이지가 이동하는게 아닌 교체하는 방식으로 화면이 바뀐다.

html에서는 a태그를 이용해 화면을 이동하지만

리액트에서는 react-router-dom이라는 패키지를 이용해 라우트경로를 설정한다.

 

일단 react-router-dom을 설치해야한다.

 

npm i react-router-dom

 

설치했으면

# HashRouter

 

index.js 파일로 가서 react-router-dom에 HashRouter로 App 컴포넌트를 감싸준다.

 

- index.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import { HashRouter } from 'react-router-dom';

ReactDOM.render(
	<HashRouter>
		<App />
	</HashRouter>,
	document.getElementById('root')
);

 

이제 App.js로 가서 라우트 관련 컴포넌트를 불러온다.

 

# Route, Switch

Route와 Switch를 가져오는데 Route만 있으면 된다.

Switch는 페이지 별로 다른 컴포넌트를 사용할때 사용하면 된다.

 

- App.js

 

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

import Footer from './components/common/Footer';
import Header from './components/common/Header';

import Main from './components/main/Main';

import Community from './components/sub/Community';
import Contact from './components/sub/Contact';
import Department from './components/sub/Department';
import Gallery from './components/sub/Gallery';
import Members from './components/sub/Members';
import Youtube from './components/sub/Youtube';
import './scss/style.scss';

function App() {
	return (
		<>
			{/* Switch내부에 중복되는 라우트 경로가 있을때 먼저나온 라우트를 채택하고 그 이후는 무시 */}
			<Switch>
				<Route exact path='/' component={Main} />
				<Route path='/' render={() => <Header type={'sub'} />} />
			</Switch>

			<Route path='/department' component={Department} />
			<Route path='/community' component={Community} />
			<Route path='/gallery' component={Gallery} />
			<Route path='/contact' component={Contact} />
			<Route path='/youtube' component={Youtube} />
			<Route path='/members' component={Members} />

			<Footer />
		</>
	);
}

export default App;

 

Route 태그에서 path로 경로를 지정하고

component와 render를 이용해 컴포넌트를 불러온다.

 

render는 props를 전달하는 컴포넌트를 불러올 때 주로 사용한다고 한다.

 

component로 props를 전달하는 컴포넌트를 불러올 경우

컴포넌트가 렌더링 할때마다 새로운 컴포넌트를 다시 생성한다

 

render는 그 불 필요한 재생성을 하지 않으니 참고하자

 

 

 

Route 태그안에 exact를 넣으면

해당 경로에만 컴포넌트를 불러오게 된다.

<Route exact path='/' component={Main} />

 

exact를 빼면

모든경로에 Main 컴포넌트가 보인다.

 

# Link

이제 Link라는 것을 알아보자

네비게이션에서 해당 페이지버튼을 클릭하면 그 페이지로 교체시켜야 하는데 이때 쓰는게 Link 이다

헤더 영역을 예시로 살펴보자

 

- Header.js

import { faBars } from '@fortawesome/free-solid-svg-icons';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { Link, NavLink } from 'react-router-dom';

function Header({ type }) {
	const active = { color: 'hotpink', fontWeight: 'bold' };
	return (
		<header className={type}>
			<h1>
				<Link to='/'>HOHO</Link>
			</h1>
			<ul id='gnb'>
				<li>
					<NavLink to='/department' activeStyle={active}>
						Department
					</NavLink>
				</li>
				<li>
					<NavLink to='/community' activeStyle={active}>
						Community
					</NavLink>
				</li>
				<li>
					<NavLink to='/gallery' activeStyle={active}>
						Gallery
					</NavLink>
				</li>
				<li>
					<NavLink to='/youtube' activeStyle={active}>
						Youtube
					</NavLink>
				</li>
				<li>
					<NavLink to='/members' activeStyle={active}>
						Members
					</NavLink>
				</li>
				<li>
					<NavLink to='/contact' activeStyle={active}>
						Contact
					</NavLink>
				</li>
			</ul>

			<FontAwesomeIcon icon={faBars} />
		</header>
	);
}

export default Header;

Link와 NavLink가 있는데

NavLink는 activeStyle이라는 props를 전달할 수 있다.

 

활성화 되었을 때 기능을 넣을수 있다