[React] Outlet

import {createBrowserRouter, RouterProvider} from 'react-router-dom';

// 1️⃣ router 생성
// createBrowserRouter 안에 경로를 설명하는 배열을 전달한다. (어떤 경로에 어떤 컴포넌트들을 보여줄 것인지)
const router = createBrowserRouter([
  {
    path: '/',
    element: <Home/>,
    errorElement: <ErrorPage/> 
  },
  {
    path: '/photos',
    element: <Photos/>,
    errorElement: <ErrorPage/>
  },
]);

// 2️⃣ 최상단 컴포넌트 또는 index.js의 render() 안에 RouterProvider를 전달한다.
// 이제 RouterProvider에서 제공한 router로 경로를 찾을 것이다.
function App(){
  return <RouterProvider router={router} />;
}

Outlet 유지할건 유지하고, 바꿀건 바꾸고!

만약 전체적인 컴포넌트가 바뀌는 것이 아니라

상단에 Navbar는 계속 고정해서 보여주고, 특정 부분만 경로 이동하며 변경하고 싶은 경우에는

React Router에서 제공하는 Outlet을 사용할 수 있다.

// App.jsx
/* App 컴포넌트 안에서 Navbar는 계속 보이도록 유지하면서, 
Outlet 안에서 컴포넌트들을 바꿔가면서 페이지를 이동하고 싶다고 가정해보자.
*/

function App() {
  return (
    <>
      <Navbar />
      <Outlet />
    </>
  );
}

export default App;

index.js

createBrowserRouter 안에서 'App 안의 outlet에서 이동할 요소'들을 App의 children 배열 안에 설정해준다.

index: true로 설정한 요소가 기본 페이지(컴포넌트)이고, 이외에 이동할 요소들은 경로와 이동할 요소를 배열 안에 입력해주면된다.

const router = createBrowserRouter([
  {
    path: '/',
    element: <App />,
    errorElement: <NotFound />,
    children: [
      { index: true, element: <Photos /> },
      { path: 'photos', element: <Photos /> },
      { path: 'photos/:keyword', element: <Photos /> },
      { path: 'photos/detail/:photoId', element: <PhotoDetail /> },
    ],
  },
]);
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <RouterProvider router={router} />
  </React.StrictMode>
);