React - 프로젝트 초기 시작 라우팅하는 법

프로젝트를 시작하면서 가장 먼저 페이지들의 구성을 생각하며 라우팅을 해야한다. 라우팅을 하는것이 프로젝트의 틀을 짜는것이기 때문이다.

1. react-router-dom 설치

2. (index.js)
   import { createBrowserRouter, RouterProvider } from 'react-router-dom';

이후 pages 폴더를 만들어서 필요한 컴포넌트들을 만들어 놓기

3. 
const router = createBrowserRouter([
  {
    path: '/',
    element: <App />,
    errorElement: <NotFound />,
    children: [
      {index: true, path: '/', element: <Home />},
      {path: '/products', element: <AllProducts />},
      {path: '/products/new', element: <NewProduct />},
      {path: '/products/:id', element: <ProductDetail />},
      {path: '/carts', element: <MyCart />},
    ],
  },
]);

4. ```
(React.StrictMode 태그 사이에)
    <RouterProvider router={router} />

5. (App.js)

<Outlet> 태그 추가하기

6. 버튼이나 글자를 클릭하면 이동할 수 있도록
   navigate 혹은 navbar를 만들어서 Link 태그로 연결시키기