React Router

// This is a React Router v6 app
import {
  BrowserRouter,
  Routes,
  Route,
  Link
} from "react-router-dom";

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="users/*" element={<Users />} />
      </Routes>
    </BrowserRouter>
  );
}

function Users() {
  return (
    <div>
      <nav>
        <Link to="me">My Profile</Link>
      </nav>

      <Routes>
        <Route path=":id" element={<UserProfile />} />
        <Route path="me" element={<OwnUserProfile />} />
      </Routes>
    </div>
  );
}

리액트는 SPA (Single Page Application) 방식이다.

기존 웹 페이지 처럼(MPA, Multiple Page Application 방식) 여러개의 페이지를 사용해서, 새로운 페이지를 로드하는 방식이 아니다!

 

React-Router는 신규 페이지를 불러오지 않는 상황에서 각각의 url에 따라 선택된 데이터를 하나의 페이지에서 렌더링 해주는 라이브러리 라고 볼 수 있다!

 

https://reactrouter.com/en/v6.3.0/upgrading/v5

Upgrading from v5 v6.3.0