Client Side Routing

왼쪽 사이드바의 버튼을 누르면 브라우저는 React Router를 사용하는 대신 서버에게 URL에 대한 전체 문서 요청을 수행한다.

client side routing을 통해 서버에 문서를 요청하지 않고 URL을 업데이트 할 수 있다.

서버와의 통신으로 문서를 업데이트 하는 것이 아니기 때문에 즉시 새로운 UI를 랜더링할 수 있다.

<a> 엘리먼트 대신 <Link> 컴포넌트를 이용해서 구현해보자.

// 📄src/routes/root.jsx

import { Outlet, Link } from "react-router-dom";

export default function Root() {
  return (
    <>
      <div id="sidebar">
        {/* other elements */}

        <nav>
          <ul>
            <li>
              <Link to={`contacts/1`}>Your Name</Link>
            </li>
            <li>
              <Link to={`contacts/2`}>Your Friend</Link>
            </li>
          </ul>
        </nav>

        {/* other elements */}
      </div>
    </>
  );
}

브라우저 devtools에서 네트워크 탭을 열어 더이상 문서를 요청하지 않는다는 것을 확일 할 수 있다.

출처 : 리액트 라우터 공식 홈페이지➡️