React Router를 통해 페이지 전환하기.

npm install react-router-dom

를 통해 react-router를 설치해준다.

 

index.js 예시이다.

import React from 'react';

import ReactDOM from 'react-dom/client';

import './index.css';

import style from './css/Main.module.css';

import './css/App.css';

import App from './App';

import Detatil from './Detail';

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

const root = ReactDOM.createRoot(document.getElementById('root'));

root.render(

  <React.StrictMode>

    <BrowserRouter>

      <header  className="App-header">

       

        <div className='Head-content'>

          <a className={style.MainLogo} href="/">LOLDUO</a>

        </div>

        <Routes>

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

          <Route path="/detail" element={<Detatil />}/>

        </Routes>              

      </header>

      <footer className='App-header'>

      © 2022 lolduo.net isn’t endorsed by Riot Games and doesn’t reflect the views or opinions of Riot Games or anyone officially involved in producing or managing League of Legends. League of Legends and Riot Games are trademarks or registered trademarks of Riot Games, Inc. League of Legends © Riot Games, Inc

      </footer>

    </BrowserRouter>

   

  </React.StrictMode>

);

 

react-router-dom에서 router를 가져와 사용한다.

해당 주소마다 가야하는 js 파일을 입력해준다.

 

라우터는 <BrowserRouter>와 <HashRouter> 두가지가 있다.

<BrowserRouter>는 HTML5의 history API를 활용하여 UI를 업데이트하고,

<HashRouter>는 URL의 hash를 활용한 라우터이다.

단순히 나누면 <HashRouter>는 정적인 파일을 호출할 때 좋다.

 

react router의 장점으로는 페이지를 전부 새로고침하는 것이 아닌 변경되는 부분만 고쳐진다는 것이다.
이로인해 페이지 로딩 속도를 올릴 수 있다.