[멋사] 리액트 라우터/클라이언트 라우팅 직접 구현

• routes.tsx

import { createBrowserRouter } from "react-router";
import Home from "@pages/Home";
import Page1 from "@pages/Page1";
import Page2 from "@pages/Page2";

const router = createBrowserRouter([
  { path: '/home', element: <Home /> },
  { path: '/page1', element: <Page1 /> }, 
  { path: '/page2', element: <Page2 /> },
]);

export default router;

• App.tsx

import { RouterProvider } from 'react-router';
import router from './routes';

function App() {
  return (
    <>
      <RouterProvider router={ router } />
    </>
  );
}

export default App;

• Header.tsx

import { Link } from "react-router";

function Header() {
  return (
    <header>
      <h1>02 리액트 라우터 사용</h1>
      <Link to="/home">home</Link><br/>
      <Link to="/page1">page1</Link><br/>
      <Link to="/page2">page2</Link>
    </header>
  );
}

export default Header;