react-router

React router

React router는 Client-side에서 페이지 분할이 가능하도록 하는 기술이다.

React Router Official Documentationreactrouter.com

의존성 설치

의존성 설치는 npm을 이용한다. 프로젝트 폴더에서 다음과 같이 작성한다.

npm install react-router react-router-dom

설치 후 package.json 파일에 다음과 같이 추가되어 있어야 한다.

Router 사용 설정

Router를 사용하기 위해 다음과 같이 index.js에 설정한다.

<BrowserRouter>
    <App/>
</BrowserRouter>

사용할 수 있는 Router는 두 가지가 있다.

• BrowserRouter - HTML5를 지원하는 브라우저의 주소 변화를 감지

• HashRouter - 해시(#) 주소 변화를 감지

사용하기 위해서는 다음과 같이 import를 해야 한다.

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

Hash Router는 배포 환경에서 주소 매핑을 사용할 수 없을 경우 사용한다.

Routing

Router를 원하는 컴포넌트에 다음과 같이 설정한다.

<Routes>
    <Route path='경로' element={태그}/>
    <Route path='경로' element={태그}/>
    <Route path='경로' element={태그}/>
    <Route path='경로' element={태그}/>
    <Route path='경로' element={태그}/>
</Routes>

사용을 위해서 다음과 같이 import를 해야 한다.

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

예시

App.js

const App = ()=>{
  return (
    <>
      <MainHeader/>
      <Routes>
        <Route path='/' element={<MainContent/>}></Route>
        <Route path='/portfo lio' element={<PortfolioList/>}></Route>
        <Route path='/quiz' element={<QuizList/>}></Route>
        <Route path='/link' element={<LinkList/>}></Route>
        <Route path='/notice' element={<NoticeList/>}></Route>
        <Route path='/info' element={<DevelopInfo/>}></Route>
      </Routes>
      <MainFooter/>
    </>
  );
}

export default App;

Router Link

Router 설정을 마쳤다면 Router로 이동할 수 있는 Link 설정을 해야 한다.

Router 이동 시 a 태그가 아닌 Link 태그로 설정해야 한다.

<Link to="경로">내용</Link>

useHistory

React Router 5.1.0 버전 이하, React 16.8 버전 이하인 경우 useHistory hook을 사용할 수 있다. 이를 이용하여 프로그래밍 적으로 라우터 이동이 가능하다.

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

const CustomComponent = ()=>{
    const history = useHistory();
    
    const clickHandler = e=>{
        history.push("/");
    };
    
    return (
        <button onClick={clickHandler}>Home</button>
    );
};

useNavigate

React Router 6 이상에서 사용 가능한 페이지 전환 명령이다.

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

const CustomComponent = ()=>{
    const navigate = useNavigate();
    
    const clickHandler = e=>{
        navigate("/");
    };
    
    return (
        <button onClick={clickHandler}>Home</button>
    );
};