[React] React Router(리액트 라우터) 사용하기

SPA 기법을 그대로 유지한 상태로 REACT에서 페이지 이동 처리하는 방법으로 React Router가 사용된다.

라우팅이란?

- 사용자가 요청한 URL에 따라 해당 URL에 맞는 페이지를 보여주는 것이라고 생각하면 쉽다.

- 리액트에는 라우팅 관련 라이브러리가 존재하는데, 그 중 리액트 라우터(React Router)를 사용해보려고 한다.

 

React Router(리액트 라우터)란 무엇인가?

- 사용자가 입력한 주소를 감지하는 역할을 하며, 여러 환경에서 동작할 수 있도록 여러 종류의 라우터 컴포넌트를 제공한다.

종류

- BrowserRouter: HTML5를 지원하는 브라우저의 주소를 감지한다.

- HashRouter: 해시 주소를 감지한다.

 

React Router(리액트 라우터) 사용해보기! (❗ React Router v6)

1) 프로젝트 생성

$ yarn create react-app router-test

 

2) 해당 프로젝트에 라이브러리 설치 

$ yarn add react-router-dom

 

3) app.js 파일에 경로 구성

import React from 'react';
import { BrowserRouter, Route, Routes } from 'react-router-dom';
import './App.css';
import Home from './components/home';
import MyPage from './components/mypage';

function App() {
  return (
    <BrowserRouter>
      <Routes>
      	// '/'로 접근할 경우 Home 컴포넌트로 렌더링
        <Route path='/' exact element={<Home />} />
        <Route path='/home' element={<Home />} />
        <Route path='/mypage' element={<MyPage />} />
      </Routes>
    </BrowserRouter>
  );
}

export default App;

- BrowserRouter를 사용하여 테스트 해볼 예정이므로, < BrowserRouter> 태그로 컴포넌트를 감싸준다.

- <Routes> 컴포넌트는 여러 <Route>를 감싸서 그 중 경로가 일치하는 단 하나만 렌더링 시켜주는 역할을 한다.

- <Route>는 path 속성에 경로, element 속성에  보여주고자 하는 컴포넌트를 넣어준다.

 

(1) home.jsx

import React from 'react';

const Home = (props) => {
  return (
    <>
      <h1>Home</h1>
      <button>Go to MyPage</button>
    </>
  );
};

export default MyPage;

 

(2) mypage.jsx

import React from 'react';

const MyPage = (props) => {
  return (
    <>
      <h1>MyPage</h1>
      <button>Go to Home</button>
    </>
  );
};

export default MyPage;

 

4) Navigation(페이지 이동)

(1) useNavigate

ex) home.jsx (mypage.jsx도 동일하게 수정)

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

const Home = (props) => {
  const navigate = useNavigate();
  return (
    <>
      <h1>Home</h1>
      <button
        onClick={() => {
          navigate('/mypage');
        }}
      >
        Go to MyPage
      </button>
    </>
  );
};

export default Home;

(2) Link

import React from 'react';
import { BrowserRouter, Route, Routes, Link } from 'react-router-dom';
import './App.css';
import Home from './components/home';
import MyPage from './components/mypage';

function App() {
  return (
    <BrowserRouter>
      <nav>
        <Link to='/home'>Home</Link>
        <Link to='/mypage'>MyPage</Link>
      </nav>
      <Routes>
        <Route path='/' exact element={<Home />} />
        <Route path='/home' element={<Home />} />
        <Route path='/mypage' element={<MyPage />} />
      </Routes>
    </BrowserRouter>
  );
}

export default App;

 

5) Result

(1) http://localhost:3000/home

(2) http://localhost:3000/mypage

 

Reference

https://reactrouter.com/docs/en/v6/upgrading/v5

React Router | Upgrading from v5