React - Routing

01.React Router

Create-React-App은 page routing을 포함하지 않고있기때문에,

routing 관련 라이브러리가 필요한데 React Router가 그중 가장 많이 쓰인다.

 

React Router를 추가하고 싶다면 "npm i -D react-router-dom"을 터미널 창에 입력한다.

만약 v5에서 v6로 업그레이드 하는 것이라면 위의 코드 마지막에 @latest를 붙힌다.

 

React Router는 사용자가 입력한 주소를 감지하는 역할을 하며, 

여러 환경에서 동작할 수 있도록 여러 종유의 라우터 컴포넌트를 제공한다.

이중 가장 많이 사용하는 라우터 컴포넌트는 BrowserRouter와 HashRouter이다.

 

02. 사용법

아래 예제는 w3schools에 있는 예제이다.

출처 : https://www.w3schools.com/react/react_router.asp

React Router

import ReactDOM from "react-dom/client";
import { BrowserRouter, Routes, Route } from "react-router-dom";사용할 router component들 import
import Layout from "./pages/Layout"; 각 폴더들을 import한다.
import Home from "./pages/Home";
import Blogs from "./pages/Blogs";
import Contact from "./pages/Contact";
import NoPage from "./pages/NoPage";

export default function App() {
  return (
    <BrowserRouter> 첫번째로, 내 content를 <BrowserRouter>로 감싼다.
      <Routes> 두번째로, Routes를 정의한다, 여러 개의 Routes를 사용할 수 있지만 한개만 사용했다.
        <Route path="/" element={<Layout />}> Route는 중첩될 수 있고 
                                              첫번째는 /의 경로를 가지며 Layout을 라우팅한다.
                                              
          <Route index element={<Home />} /> home에는 path가 없으나 index에 의해 이 경로를 
                                              상위 경로의 기본 경로로 한다.
                                              
          <Route path="blogs" element={<Blogs />} />  중첩된 Route가 상속되어 상위 경로에 추가된다.
                                                       blogs의 path는 /blogs가 된다.
                                                       
          <Route path="contact" element={<Contact />} />
          
          <Route path="*" element={<NoPage />} /> path에 *값을 할당하면 정의되지 않은 경로들을
                                                  의미한다, 404 error page에 적합하다.
        </Route>
      </Routes>
    </BrowserRouter>
  );
}

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

 

 

 

 

**단어 설명

• routing - 간단하게 생각 하자면 사용자가 요청한 URL에 따라 해당 URL에 맞는 페이지를 보여주는 것이라고 생각할 수 있다.