2. App.js 설정 -> React-router-dom

 App.js가 가장 먼저 실행 될때, App.js를 다른 js파일들을 연결시키는 Router 개념으로 사용한다.

 

npm install react-router-dom

 

 

react-router-dom : 브라우저에서 사용되는 리엑트 라우터

 

<요소>

BrowserRouter - history API를 사용해 URL과 UI를 동기화하는 라우터입니다.

Route - 컴포넌트의 속성에 설정된 URL과 현재 경로가 일치하면 해당하는 컴포넌트, 함수를 렌더링한다.

Link - 'a'태그와 비슷합니다. to속성에 설정된 링크로 이동합니다. 기록이 history스택에 저장됩니다.

Switch - 자식 컴포넌트 Route또는 Redirect중 매치되는 첫 번째 요소를 렌더링합니다. Switch를 사용하면 BrowserRouter만 사용할 때와 다르게 하나 의 매칭되는 요소만 렌더링한다는 점을 보장해줍니다.
사용하지 않을 경우 매칭되는 모두를 렌더링합니다.

 

 

Suspense (react 내장)

: 어떤 컴포넌트를 읽어야하는 데이터가 아직 준비가 되어있지 않을때 리엑트에게 알려주는 메커니즘

: 주로 Loading중을 알림

 

 

코드

 

App.js

 

import React, {Suspense} from 'react';

import {

 BrowserRouter as Router (이름이 기니까 다른 이름으로 명명) ,

 Routes,

 Route,

 Link,

 Switch,

} from 'react-router-dom';

 

import RegisterPage from './RegisterPage/RegisterPage';

import MainPage from './MainPage/MainPage';

 

function App(){

  return(

     <Router>

          <Suspense fallback = {<div>Loading...</div>}>

                <div style={{paddingTop: "150px"}}></div>

                 <div>

                <Routes>

                      <Route path = "/"  element = {<MainPage />} />

                      <Route path = "/register" element = {<RegisterPage /> } />

                 </Routes>

                 </div>

           </Suspense>

     </Router>

 );

};

export default App;