outlet 사용하는법 : 페이지 전체를 랜더링 X

1. 설치

\npm install react-router-dom@6

yarn add react-router-dom 2. package.json 확인해보기

    "react-router-dom": "^6.4.3",

 

App

const queryClient = new QueryClient();
function App() {

  return (
   <>
   <SearchHeader/>
   <QueryClientProvider client={queryClient}>
   <Outlet/>
   </QueryClientProvider>
    
   </>
  );
}

 

 

 

index.js

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import { createBrowserRouter, RouterProvider } from 'react-router-dom';
import NotFound from './pages/NotFound';
import Home from './pages/Home';
import AllProducts from './pages/AllProducts';
import NewProduct from './pages/NewProduct';
import ProductDetail from './pages/ProductDetail';
import MyCart from './pages/MyCart';


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/>},
    ]
  }
])
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <RouterProvider router={router} />
  </React.StrictMode>
);

<해석>

우리는 기본적으로 '/' 메인페이지를 보여줄거고 그건 App 이다.

주소를 잘못 입력할 경우 NotFound 라는 컴포넌트로 이동이 된다.

 

중요한건 우리가 다른 무언갈 클릭 했을때 전체 페이지 로딩이 아니라 그페이지에서 업로드 되는걸 구현하기 위해

outlet 을 설정해주는데 그걸 우리가 보는 페이지에서 바로  보여줄 수 있게 만들어 준다.

자식요소를 정해줄건데 children : {

index :true 자식요소인데 그게 기본적으로 보여주는 페이지 일거고 그건 <Videos/>야

path :'videos' 이고 보여줄 애는 <Videos/> 컴포넌트 일거야

}