[React] SPA 방법 및 문제점

SPA 방법

react-router-dom을 이용한다.

import { Route, Switch, Redirect, NavLink } from 'react-router-dom';

<Router>
  <Switch>
    <Route path={['/', '/tab1']} exact>
      / 혹은 /tab1에서 보여줄 돔 요소
    </Route>
    <Route path="/tab2">
      /tab2에서 보여줄 돔 요소
    </Route>
    <Route path="/tab3">
      /tab3에서 보여줄 돔 요소
    </Route>
  </Switch>
</Router>

문제점

탭을 누르는 것 뿐인데 path가 바뀌어서 마케팅 팀 쪽에서는 클릭 수에 대한 정보를 정확하게 파악할 수 없게 된다.