React Router(라우터에 대해 알아보자)

참고링크
https://reactrouter.com/en/6.14.1/router-components/browser-router

BrowserRouter

브라우저 라우팅을 위해 BrowserRouter를 사용합니다. BrowserRouter는 React 애플리케이션에서 HTML5의 History API를 활용하여 브라우저의 URL과 상호작용하고, 해당 URL에 따라 적절한 컴포넌트를 렌더링하는 역할을 합니다.

한문장으로 표현하면 URL과 일치하는 경로에 따라 적절한 컴포넌트를 렌더링한다 라고 이해하면 될 것입니다.

실습으로 한번 경험해보겠습니다.

App.js의 코드를 다음과 같이 수정하겠습니다.

BrowserRouter를 사용하기 위해 필요한 라이브러리들을 import 해주었습니다.

npm install react-router-dom

import { BrowserRouter, Routes, Route } from 'react-router-dom'

Pages function에는 Route할 경로들을 모아놓기 위해서 따로 구현한뒤
App function에서 BroswerRouter 태그안에서 Pages를 불러와서 사용하고 있습니다.

function Pages(){
  return (
  <Routes>
    <Route path="/" element={<MainPage />}/>
  </Routes>
  );
};

Route 안의 path를 '/'로 구현하여 npm start시 제일먼저 나오는 페이지경로로 설정하였습니다. 이때 element 안의 MainPage가 '/' 경로에서 볼 수 있는 페이지라고 보시면됩니다.

이때 MainPage는 아직 저희가 구현하지 않았기 때문에 생성을 해주도록 하겠습니다.

src폴더 안에 html 폴더를 따로 만들어서 main.js를 만들었습니다.

function Main(){
  return  (
  <div>
    <div> 메인페이지 </div>
  </div>);
}
export default Main;

그 후 다시 App.js로 돌아와 main.js를 import 해줍니다.

import MainPage from './html/main';

최종코드

npm start를 통해 서버를 실행시켜보면

main.js에서 구현한 태그가 바로 보이는것을 확인할 수 있습니다.

앞으로 App.js에 있는 pages function에 Route를 하나씩 늘려가면서 여러 페이지를 라우팅 할 수 있습니다.

예시