React - Router Routing

https://reactrouter.com/

React Router: Declarative Routing for React

---

• SPA 라우팅 과정
  1. 브라우저에서 최초에 '/' 경로 요청
  2. 서버에서 React Web App 전체를 내려줌
  3. 내려받은 React App에서 '/' 경로에 맞는 컴포넌트를 보여줌
  4. React App 에서 다른 페이지로 이동하는 동작을 수행하면,
     새로운 경로에 맞는 컴포넌트를 보여줌

• React Router 설치
  • npm i react-router-dom
    • CRA에 기본 내장된 패키지가 아니므로 별도로 설치 필요
    • react-router-dom은 Facebook의 공식 패키지가 아님
    • 가장 대표적인 라우팅 패키지
      
      

• React Router 사용
  • Route 컴포넌트에 경로(path) 와 컴포넌트(component) 설정 및 나열
  • BrowserRouter의 하위 요소로 Route 들을 배치
  • 브라우저에서 요청한 경로에 Route의 path가 들어있으면 해당 component 노출
  • exact 설정 시 정확히 동일한 path일 경우에만 노출
    
    

import { BrowserRouter, Route } from 'react-router-dom';
import Home from './pages/Home';
import About from './pages/About';
import Profile from './pages/Profile';

function App() {
  return (
    <BrowserRouter>
      <Route path="/" exact component={Home} />
      <Route path="/about" component={About} />
      <Route path="/profile" component={Profile} />
    </BrowserRouter>
  );
}

export default App;