React Router Dom

Routes => 둘러쌓인 route 컴포넌트중 1개만의 렌더링을 허락한다.
/ 가 있고 밑에 /topics가 있을경우에서 메인 홈페이지(/)로 이동시 밑의 route component /topics는 선택되지 않는다. (exact 사용.)

<a href="" 같은 경우는 전체페이지를 Reload하기 때문에 병목현상을 유발시킨다. 고로, 클릭된 링크의 route 컴포넌트만 바꿔주게 되는 <Link to="" 를 사용하라.

<NavLink to="" 현재 클릭된 요소에 'active'라는 클래스를 지정해준다.

class App extends Component {

  render() {
    return (
          <Routes>
            <Route exact path='/' element={<Home />}></Route>
            <Route path='/music' element={<Music />}></Route>
            <Route path='/contact' element={<Contact />}></Route>
          </Routes>
    );
  }
}