[React] React Router : 기본 세팅

1. 설치 진행

yarn add react-router-dom

2. BrowserRouter 최상단 컴포넌트 감싸주기

BrowserRouter 란?

HTML5 의 History api 를 사용하여 페이지를 새로 고침하지 않고도 url 변경을 통해 특정 경로에 route 돼있는 리액트 컴포넌트를 불러와 사용할 수 있게 해준다.

 

내 블로그 내 History api 간단 설명 url :

 

src/index.js

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

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <BrowserRouter>
      <App />
    </BrowserRouter>
  </React.StrictMode>
);

3. FirstPage, SecondPage, ThirdPage 컴포넌트 생성.

src/page/FirstPage.js

import React from 'react';

const FirstPage = () => {
    return (
        <div> 
            <h1>This is the First Page</h1>
            <h2>This page can be recognised as Main Page</h2>
        </div>
    );
};

export default FirstPage;

 

src/page/SecondPage.js

import React from 'react';

const SecondPage = () => {
    return (
        <div> 
            <h1>This is the Second Page</h1>
        </div>
    );
};

export default SecondPage;

 

src/page/ThirdPage.js

import React from 'react';

const ThirdPage = () => {
    return (
        <div> 
            <h1>This is the Third Page</h1>
        </div>
    );
};

export default ThirdPage;

 

4. App.js 에 <Routes /> 와 <Route> 로 세팅해주기.

import React from 'react';
import { Route, Routes } from 'react-router-dom';
import FirstPage from './page/FirstPage';
import SecondPage from './page/SecondPage';
import ThirdPage from './page/ThirdPage';

function App() {

  return (
    <Routes>
        <Route path='/' element={<FirstPage />} />
        <Route path='/second' element={<SecondPage />} />
        <Route path='/third' element={<ThirdPage />} />
    </Routes>

  );
}

export default App;

맨 첫번째 Route 에 path ' / ' 에 의미는 url 에서 path 입력 없이 도메인만 입력했을 시 또는 path 를 ' / ' 만 입력 시 접속 페이지를 <FirstPage /> 로 하겠다는 뜻이다. 즉 메인 페이지를  <FirstPage /> 로 지정한 것이다.

 

React 를 실행한 후 아래 이미지와 같이 url 에 접속해보면 각각 Route 된 컴포넌트들이 불러와진다.

5. useNaviage() 테스트

useNavigate() 와 Link 를 사용하여 각 Route 돼있는 컴포넌트로 버튼 또는 이벤트를 통해 이동 처리를 해보자.

 

각각의 컴포넌트들에 useNavigate() 를 호출한 후 버튼을 생성하여 아래와같이 onClick 속성을 추가했다.

 

src/page/FirstPage.js

const FirstPage = () => {
    const navigate = useNavigate();
    return (
        <div> 
            <h1>This is First Page</h1>
            <h2>This page can be recognised as Main Page</h2>
            <button onClick={() => navigate('/second')}>move to second Page</button>
        </div>
    );
};

 

src/page/SecondPage.js

const SecondPage = () => {
    const navigate = useNavigate();
    return (
        <div> 
            <h1>This is Second Page</h1>
            <button onClick={() => navigate('/third')}>move to Third Page</button>
        </div>
    );
};

 

src/page/ThirdPage.js

const ThirdPage = () => {
    const navigate = useNavigate();
    return (
        <div> 
            <h1>This is Third Page</h1>
            <button onClick={() => navigate('/')}>move to First Page</button>
        </div>
    );
};

 

그 다음 새로 랜더링된 페이지들을 확인해보면 버튼이 추가돼 있다.

 

클릭을 해보면 정상적으로 페이지가 이동된다.

 

SPA 의 특성상 첫 실행시 모든 페이지를 다 불러온다. 그다음 url 의 변경을 통해 이미 불러와진 페이지(컴포넌트) 를 위로 덮어써 가져오는 형태 이다. 그래서 페이지 새로고침 없이 화면이 빠르게 전환 되는 것이다.

6. Link 테스트

useNavigate 에 이어 Link 기능 또한 테스트 해보자.

메인 페이지에 Link 를 추가해 Thrid Page 로 한번에 이동할 수 있도록 기능 추가해보겠다.

const FirstPage = () => {
    const navigate = useNavigate();
    return (
        <div> 
            <h1>This is First Page</h1>
            <h2>This page can be recognised as Main Page</h2>
            <ul>
                <li>
                    <Link to={'/third'}>Third Page</Link>
                </li>
            </ul>
            <button onClick={() => navigate('/second')}>move to second Page</button>
        </div>
    );
};

 

그럼 아래 이미지와 같이 링크가 하나 추가된다.

그리고 클릭해보면 Third Page 로 이동한다.

7. Not Found 페이지 추가

유저가 실수로 Route 돼있지 않은 url 로 접속을 할 수도 있다. 그것이 악의적은 의도던 실수던 우리는 그에 따른 대응을 해줘야 한다. 

Route 돼있지 않은 path 들은 모두 Not Found 페이지로 처리를 해줄것이다.

간단하다.

 

먼저 Not Found 컴포넌트를 만들어주자.

 

src/page/NotFound.js

import React from 'react';

const NotFound = () => {
    return (
        <div>
            <h2>This is Not Found Page</h2>
            <br/>
            <p>Sorry, Something went wrong.</p>
            <p>please, contact to the page manager.</p>
        </div>
    );
};

export default NotFound;

 

그다음 App.js 로 가서 Route 등록을 해준다.

import React from 'react';
import { Route, Routes } from 'react-router-dom';
import FirstPage from './page/FirstPage';
import SecondPage from './page/SecondPage';
import ThirdPage from './page/ThirdPage';
import NotFound from './page/NotFound';

function App() {

  return (
    <Routes>
        <Route path='/' element={<FirstPage />} />
        <Route path='/second' element={<SecondPage />} />
        <Route path='/third' element={<ThirdPage />} />

        <Route path='*' element={<NotFound />} />
    </Routes>

  );
}

export default App;

새로 등록된 Route 에 path 를 보면 ' * ' 로 지정됐다. 이 뜻은 '모든' 이라는 뜻을 가지고 있다. 즉 위에 지정된 path 를 제외한 다른 모든 path 들은 <NotFound /> 로 Route 할 것이라는 뜻이다.

 

 

React 를 실행한 후 url path 에 지정하지 않은 path 를 입력 후 접속을 해보면 아래와 같이 NotFound 페이지로 라우트 해준다.

 

 

Reference

https://velog.io/@velopert/react-router-v6-tutorial

React Router v6 튜토리얼

https://developer.mozilla.org/ko/docs/Web/API/History_API

History API - Web API | MDN